How to keep all the spaces in a string while using bulma and VUE

I am new to bulma. I am struggling how to preserving white space on certain elements, while using bulma. I have a column from a database that has mutiple space, but shown HTML only one space. I try to either use tag <pre> around column:

<td><pre>{{mysqlcomumn_hasMultipleSpace}}</pre></td>

or to add custom style in css , it all failed to show original multiple space and only can display one space

<table class="whiteSpace" >
    
    <style lang="scss">
    @import "../node_modules/bulma";
    
    .whiteSpace{
        white-space:pre /* or pre-wrap if you want wrapping to still work. */
    }
    </style>

can anyone help me hwo to fix it? VUE + bulma thanks!