请教一个vue相关的问题,路过的大佬麻烦指导下，拜谢！

目前项目中使用的是vue2,我在写自定义插件的时候，参考官方文档的写法：

// 创建构造器
var Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  data: function () {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})
// 创建 Profile 实例，并挂载到一个元素上。
new Profile().$mount('#app')

最终页面上显示的是这样的：

和文档里面说的不一致，这是为什么？

项目是使用vue的脚手架创建的。

我直接通过cdn引入就可以正常显示这是为什么？

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>