vue3 一样的代码一个报错不显示一个正常 ，如何解决？ vue.js

一样的代码
资料里是左边我写的是右边
报错内容是Property x was accessed during render but is not defined on instance. at x

其中资料里的正常显示

我的报错

而且不止一次也不止这一个案例 不知道为什么求帮助
代码如下

javascript

<template>
  <div>
    <h3>watch 侦听器的用法</h3>
    <input type="text" v-model.trim="username" />
  </div>
</template>

<script>
export default {
  name: "MyWatch",
  date() {
    return {
      username: "",
    };
  },
  watch: {
    username(n, o) {
      console.log(n, o);
    },
  },
};
</script>

<style>
</style>

这是我的报错代码 如上


> 
> 

<template>
  <div>
    <h3>watch 侦听器的用法</h3>
    <input type="text" v-model.trim="username" />
  </div>
</template>

<script>
export default {
  name: "MyWatch",
  data() {
    return {
      username: "",
    };
  },
  watch: {
    username(n, o) {
      console.log(n, o);
    },
  },
};
</script>

<style lang="less" scoped></style>

这是不报错的

你好好看看一样不一样，右边那张图，那是data，不是date，有帮助请点个采纳，谢谢

date 写错了 应该是 data

这不是vue3 是vue2