使用jq load方法加载vue 模板不识别vue语法

Question

我没有使用webpack等构建工具，页面跳转借助jq的load方法
index.html

<div id='app'>
    <!--侧边导航-->
    <div class='side-menu'>
        <button @click='getData'>加载数据</div>
    </div>
    
    <!--存放主要内容-->
    <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:'测试',
        list:[
            {name:'aa'},
            {name:'aa'},
            {name:'cc'}
        ]
    }
})
</script>

加载test.html成功之后并没有渲染出data里面的内容，二是直接出现{{msg}}这样的大括号，为啥vue语法不起作用呢？

Answer 1

在test.html中也需要在head或者new Vue(*)的上面引入Vue，这已经算是另一个独立的页面，这可不是单页面项目，在index.html引入的Vue在test.html无效。

Answer 2

肯定不行啊，动态引入的没经过编译，没转换成js，浏览器是不认识的，得在页面上引入vue的运行时的包