In a new folder, create a new npm project (you can use npm init -y or yarn init -y).
Inside the folder, create a new directory named src and put a file inside it, called MyComp.vue. Let the file contain the following code:
<template> <div> Hello {{name}}! </div></template><script>export default { data () { return { name: 'John', name: 'Jane' } }}</script>
We can already spot a problem--the John name property will be overwritten by the later property, Jane, with the same key. Let's pretend that we didn't notice this and put the component inside a web page. For this, we need another file, named index.js, in the src directory. Write the following code inside it:
import Vue from 'vue'import MyComp from './MyComp.vue'new Vue({ ...
