SurveyJS Not Displaying - laravel

Question

Trying to use surveyjs with laravel and vue, but when I try to get the survey from a api does not work.
I'm getting the data from a api in laravel controller.
surveyshow.vue
<template>
<div>
<survey :survey="survey"></survey>
</div>
</template>
created () {
...
let url = `/api/edit/i130`;
axios
.get(url)
.then(response => {
surveyJson = JSON.parse(response.data.data.json);
console.log(JSON.parse(response.data.data.json));
})
.catch(function (error) {
console.log(error);
});
this.survey = new SurveyVue.Model(surveyJson);
if I replace the variable using a constant works.
var surveyJson = {
pages: [
{
"name": "Address",
"title": "Address",
"questions": [
{
"type": "text",
"name": "address1",
"title": "Street Address",
"autocompleteAs": "placeautocomplete"
}, {
"type": "text",
"name": "address2",
"title": "Address Line 2"
}
]
}
]
};

Answer 1

You have a problem with the asynchronous aspect of your code. There is a callback function, which runs when the request to your api completes:
...
.then(response => {
surveyJson = JSON.parse(response.data.data.json);
console.log(JSON.parse(response.data.data.json));
})
...
but you are trying to load the survey json "outside" of it. In other words, this runs before the api request's callback has had a chance to load the survey's JSON:
...
this.survey = new SurveyVue.Model(surveyJson);
...
You should move the line that instantiates your survey inside the callback, like this:
...
.then(response => {
surveyJson = JSON.parse(response.data.data.json);
window.survey = new SurveyVue.Model(surveyJson);
})
...