With a constructor to create DOM, when the data listener driver creates an instance in Vue, it feels like asynchronous - Codes Helper

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://cdn.bootcss.com/quill/1.3.6/quill.bubble.min.css" rel="stylesheet">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <tmp :cur="curL"></tmp>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
    <script src="https://cdn.bootcss.com/quill/1.3.6/quill.js"></script>
    <script>        
        var vm = new Vue({
            el : "-sharpapp",
            data :function(){
                return {
                    initData : [],
                    limit : 5,
                    pages : [],
                    ind : 0,
                    curL : []
                }
            },
            created : function(){
                // 20
                for(var i = 0; i < 20; iPP){
                    this.initData.push({
                        sId : "sl" + i,
                        cnt : null
                    })
                }
            },
            mounted : function(){
                this.loadPage()
            },
            methods : {
                // 
                segFn : function(){
                    var senObj = {
                        sId : "sl" + 21, // 
                        cnt : null
                    }
                    // 
                    this.initData.splice(1,0,senObj)
                    this.loadPage()
                },
                loadPage : function(){
                    var lmt = this.limit,
                        len = this.initData.length,
                        pageL = Math.ceil(len / lmt);
                    for(var i = 0; i < pageL; iPP){
                        if(i != (pageL-1)){
                            this.pages[i] = this.initData.slice(i*lmt, i*lmt+lmt)
                        } else {
                            this.pages[i] = this.initData.slice(i*lmt)
                        }
                    }   
                    this.curL = this.pages[this.ind]                
                }
            },
            components : {
                "tmp" : {
                    template : "<div>\
                                    <div v-for="item in cur" :id="item.sId"></div>\
                                </div>",
                    props : ["cur"],
                    data : function(){
                        return {
                            toolbarOptions: [
                                ["bold", "italic", "underline", "strike"],
                                [{
                                    "color": [],
                                }]
                            ]
                        }
                    },
                    watch : {
                        cur : function (val){
                            // 
                            this.$nextTick(function(){
                                val.forEach(element => {
                                    //
                                    if(element.cnt) return;
                                    // 
                                    element.cnt = new Quill("-sharp"+element.sId,{
                                        modules : {
                                            toolbar : this.toolbarOptions
                                        },
                                        theme: "bubble"
                                    })
                                    // 
                                    element.cnt.setText(element.sId)
                                });
                            })
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>

all the code, the general logic is, when initializing, 20 pieces of data are generated, and in the loadPage method, paging is carried out according to the amount of data and the amount of data per page; then all the data initDatais divided into pages, subcomponents to receive the data of the page through cur and render circularly; these are process descriptions;

the problem is that initializing initData data and generating one-to-one corresponding instances to sId;

through sub-component instance methods.

initDatasId

I have no problem testing with ordinary constructors, only when using the quill plug-in. Every time quill is instantiated, the dom element is dynamically common. This may be the reason why I originally thought that no matter how I manipulate the array, it corresponds one to one!
the code I posted above can be copied and run directly. Please help me answer this question. For the first time, if I don"t describe it clearly, you can reply me and I will describe it again.