使用jq load方法加載vue 模板不識(shí)別vue語(yǔ)法

我沒有使用webpack等構(gòu)建工具，頁(yè)面跳轉(zhuǎn)借助jq的load方法
index.html

<div id='app'>
    <!--側(cè)邊導(dǎo)航-->
    <div class='side-menu'>
        <button @click='getData'>加載數(shù)據(jù)</div>
    </div>
    
    <!--存放主要內(nèi)容-->
    <div id='contain'></div>
</div>

<scipt>
var app=new Vue({
    el:'#app',
    methods:{
        getData:function(){
            $('#contain').load('test.html')
        }
    }
})
</script>

test.html

<div id='test'>
    {{msg}}
    <p v-for='item in list'>{{item.name}}</p>
</div>

<scipt>
var test=new Vue({
    el:'#test',
    data:{
        msg:'測(cè)試',
        list:[
            {name:'aa'},
            {name:'aa'},
            {name:'cc'}
        ]
    }
})
</script>

加載test.html成功之后并沒有渲染出data里面的內(nèi)容，二是直接出現(xiàn){{msg}}這樣的大括號(hào)，為啥vue語(yǔ)法不起作用呢？