Nested array not rendering in Vue.js?

Question

JavaScript

In data, nested array of objects ( "next_steps" ) is not rendered.
Javascript code:

const questsApp = Vue.createApp({
    data() {
        return {
            scenesList: [],
            currentScene: [
                {
                    "ID": "1",
                    "category_id": "1",
                    "card_title": "Добро пожаловать в квест",
                    "card_body": "Добро пожаловать в квест. Если захочешь выйти из квеста скажи прощай.Ты готов?",
                    "choises": "Ты готов окунуться в атмосферу эпической саги?",
                    "next_steps": "[{"id":1,"answer":"готов", "next_step":17},{"id":2,"answer":"не готов", "next_step":0},{"id":3, "answer": "да", "next_step":17}, {"id":4,"answer":"нет","next_step":0}]",
                    "account": "0",
                    "reputation": "0"
                }
            ]
        }
    }
})

HTML code:

<div class="modal-body">
                <div class="row align-items-md-stretch">
                    <div class="col-md-6 pt-3">
                        <div class="h-100 p-5 bg-light border rounded-3">
                            <label for="inputRequest" class="form-label">Scene title</label>
                            <input type="text" class="form-control" id="inputTitle" placeholder="Title of scene" v-bind:value="currentScene[0].card_title">
                            <div class="pt-3">
                                <label for="inputAnswer" class="form-label">Card body</label>
                                <textarea class="form-control" id="inputBody" rows="9">{{currentScene[0].card_body}}</textarea>
                            </div>
                            <div class="pt-3">
                                <label for="inputAnswer" class="form-label">Choises</label>
                                <textarea class="form-control" id="inputChoises" rows="4">{{currentScene[0].choises}}</textarea>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 pt-3">
                        <div class="h-100 p-4 text-white bg-dark rounded-3">
                            <h5>Next steps</h5>
                            <button id="newInputAnswer" class="btn btn-outline-light" type="button" v-on:click="handleInput">Добавить</button>
                            <div id="inputContainer" class="mt-3">
                                <ul v-for="step in currentScene[0].next_steps" >
                                   <li> <label>{{ step.id }}</label>
                                    <p>{{step.answer}}</p>
                                   </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

Answer 1

next_steps is set as a string, you must first parse it into an array.
JSON.parse(currentScene[0].next_steps)