vue cli 3 双向绑定报错

<template>
  <div class="demo-Directives-If">
    <span>{{msg}}</span>
    <button>刷新</button>
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  name: "demo-Directives-If",
};
window.onload = function () {
  new Vue({
  el: '.demo-Directives-If',
  data: {
    msg: 'Hello Vue!'
  }
})
}
</script>

初次用vue cli 3 这里报错msg未定义，请问msg该如何声明呢

https://www.cnblogs.com/hanguidong/p/9416194.html

new Vue()创建实例不要写在window.onload里面
el参数最好绑定id

data () {
  return {
    message: 'hello!'
  }
},