Array stored in table not render correctly by Vue ( Laravel 8 )

Question

I am using laravel 8 and vue in my project. using axios for API request and display the output using vue.

All rendered nicely except One field that stored tags as ["leave", "paperless"] in mysql

Tried to render it using the code below

                <li>
                    <i class="mdi mdi-tag-text-outline"></i>
                    <a href="#" v-for="tag in article.tags">
                        {{ tag }}</a>,
                </li>

Output is each of character is a link

And this is the html output

             <li><i class="mdi mdi-tag-text-outline"></i> <a href="#">
                    [</a><a href="#">
                    "</a><a href="#">
                    l</a><a href="#">
                    e</a><a href="#">
                    a</a><a href="#">
                    v</a><a href="#">
                    e</a><a href="#">
                    "</a><a href="#">
                    ,</a><a href="#">
                     </a><a href="#">
                    "</a><a href="#">
                    p</a><a href="#">
                    a</a><a href="#">
                    p</a><a href="#">
                    e</a><a href="#">
                    r</a><a href="#">
                    l</a><a href="#">
                    e</a><a href="#">
                    s</a><a href="#">
                    s</a><a href="#">
                    "</a><a href="#">
                    ]</a>,
            </li>

Please advise on how to solve this issue.. Thanks

Answer 1

I have solved the problem by adding JSON.parse to the tags as below

                <li>
                    <i class="mdi mdi-tag-text-outline"></i>
                    <a href="#" v-for="tag in JSON.parse(article.tags)">
                        {{ tag }}</a
                    >
                </li>

Effect is