I want to make a background wheel for future development. I want to integrate wangEdit for the rich text editing of the middle form. I use vue vue-router. It is planned to be made into an independent module. The front end calls the component and requests the back end to provide it. The data interface is used to render the desired page, so this is written in the page:

<template>
    <p>
        <p v-for="item in items">
            <p v-if="item.type=='editor'">
                <label>{{ item.title }}</label>
                <p id="editor" style="height:400px;max-height:500px;">
                    {{ item.model }}
                </p>
            </p>
            <p v-if="item.type=='input'">
                <el-input v-model="item.model" placeholder="请输入内容"></el-input>
            </p>
        </p>
    </p>
</template>

Then I wrote in vue’s mounted:

mounted() {
            axios.get('shop/pageData').then((res)=>{
                this.items = res.data.data;
                var editor = new wangEditor('editor');
                editor.create();
            });
        }

Then it cannot be rendered and an error is reported

Uncaught (in promise) TypeError: Cannot read property 'menus' of undefined

I haven’t done much front-end work or use vue. I would like to ask you:
1. How can vue cooperate with the back-end to better obtain data? json_encode($data)//I use php when calling components directly on the page. The backend
still requests data from axios when the component is called
2. At first, I thought it was a time difference problem. I thought the problem was caused by rendering before the data was requested, so I tried creating(){} Partially requests data, assigns the value to this.data, and then finds that this.data has no value when calling mounted(){}. Why is this?