【Vue.js】Composition APIの書き方でバインディングなどされず、is not defined...エラーになってしまう

Question

Intro to Vue 3 + Composition API: Build a Todo Appというyoutubeのハンズオン動画を参考にComposition APIの学習しているのですが、作業途中、以下のようなエラーとなってしまいます。

[Vue warn]: Property or method "newTodo" is not defined on the instance but referenced during render.

以下、どれもインスタンスで定義されていませんとなってしまい、どのように解決すればいいのかわからずにいます。

• newTodo
• todos
• addNewTodo

##コード

<template>
  <div>
    <h1>Vue 3 Todo App</h1>
    <form @submit.prevent="addNewTodo">
      <label>New Todo</label>
      <input v-model="newTodo" name="newTodo" />
      <button>Add New Todo</button>
    </form>
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        <h3>{{ todo.content }}</h3>
      </li>
    </ul>
  </div>
</template>

<script>
import { ref } from "vue";
// import { defineComponent, ref, reactive } from "@vue/composition-api";

export default {
  setup() {
    // 初期化
    const newTodo = ref("");
    const todos = ref([]);

    // listに追加
    function addNewTodo() {
      todos.value.push({
        done: false,
        content: newTodo.value,
      });
    }
    return {
      todos,
      newTodo,
      addNewTodo,
    };
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

エラーキャプチャ

環境

node v13.12.0
@vue/composition-api": "^1.0.0-beta.18

なにかアドバイスいただけると助かります。
よろしくお願いします。