Vue3 Element-plus el-inputにて, 文字入力ができない

Question

前提

Vue2(Options API)の参考書に載っているアプリケーションを参考にしながら, Vue3の<script setup>で書き換えを行っています。

実現したいこと

Element-Plusを使用し, el-form, el-inputにてv-modelでリアクティブな入力ができるようにしたいと考えています。

発生している問題・エラーメッセージ

el-inputに, キーボード入力を行っても, 入力欄に何も表示されない。

エラーは特に発生していません
trackingできない...

該当のソースコード

import { createApp, provide, toDisplayString } from 'vue'
import './style.css'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from "./router/router";
import store from "./store/store";

const app = createApp(App)
app.use(store).use(router).use(ElementPlus).mount('#app')

app.config.globalProperties.$http = (url, opts) => fetch(url, opts)

app.provide('myFetch', app.config.globalProperties.$http)

<template>
  <div id="form">
　 // BookInfo...選択した本の詳細を表示
    <BookInfo :book="book"></BookInfo>
    <hr />
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="読了日">
        <el-date-picker type="date" v-model="form.read"></el-date-picker>
      </el-form-item>
      <el-form-item label="感想" prop="memo">
        <el-input type="textarea" size="large" v-model="form.memo"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onsubmit">登録</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { useStore } from "vuex";
import { ref, reactive, onMounted, inject } from "vue";
import BookInfo from '../components/BookInfo.vue'
import { UPDATE_CURRENT, UPDATE_BOOK } from '../mutation-types'
import router from "../router/router";

const store = useStore()
// book...選択している本の情報を保持
// form...el-formにて使用
let book = ref({})
let form = reactive({
  read: new Date(),
  memo: ""
})
let valid = ref(true)

const rules = reactive({
  memo: [{ require: true, message: 'メモが未入力です', trigger: 'change' }]
})

// 選択している本が無ければ, HOME画面を表示
if ( !store.getters.current ) {
  router.push("/")
} else {
  book.value = Object.assign({}, store.getters.current)
}

onMounted( () => {
  // すでに記録が登録されている場合, その記録をFormに反映
  let b = store.getters.getBookById(book.value.id)
  if (b) {
    form.read = b.read
    form.memo = b.memo
  }
})

const onsubmit = () => {
// validは, テスト用に設けた変数なので意味は無し
  if (valid) {
    store.dispatch(UPDATE_BOOK, Object.assign({}, book.value, form))
  }
  store.dispatch(UPDATE_CURRENT, null)  

  form.read = new Date()
  form.memo = ""
  router.push("/")
}

/*　以下は, 参考書に記載されているVue2(Options API)で書かれたもの
export default {
  name: 'book-form',
  components: {
    BookInfo
  },
  data() {
    return {
      book: {},
      form: {
        read: new Date(),
        memo: ''
      },
      rules: {
        memo: [
          { required: true, message: 'メモが未入力です。', trigger: 'blur' }
        ]
      },
      rules: {
        memo: [{
          validator: (rule, value, callback) => {
            console.log(rule);
            if (!value) {
              return callback(new Error('メモが未入力です。'))
            }
          },
          trigger: 'change'
        }]
      }
    }
  },
  computed: mapGetters([ 'current', 'getBookById' ]),
  created() {
    if (!this.current) {
      this.$router.push('/')
    }
    this.book = Object.assign({}, this.current)
  },
  mounted() {
    let b = this.getBookById(this.book.id)
    if (b) {
      this.form.read = b.read
      this.form.memo = b.memo
    }
  },
  methods: {
    ...mapActions([UPDATE_BOOK, UPDATE_CURRENT]),
    onsubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this[UPDATE_BOOK](
            Object.assign({}, this.book, this.form)
          )
          this[UPDATE_CURRENT](null)
          this.$notify({
            title: 'Reading Recorder',
            message: this.$createElement('p', { style: 'color: #009' },
              '読書情報の登録／更新に成功しました。'),
            duration: 2000
          })
          this.form.read = new Date()
          this.form.memo = ''
          this.$router.push('/')
        }
      })
    }
  }
}
*/
</script>

<style scoped>
#form {
  margin-top: 15px;
}
</style>

試したこと

・Vueのデヴェロッパーツールを見ましたが, <el-input type="textarea">には, 一文字だけが認識されているみたいでした。
・refやreactiveにたいする参照の方法が間違っているかと思いましたが, 合っているようです。
・特段エラー文が出ていないので, 構文的エラーはないと思うのですが, onMountedなどの使い方が間違っているのかもしれません...

補足情報（FW/ツールのバージョンなど）

"node": v16.17.0
"npm": v8.15.0
"element-plus": "^2.2.16"
"vue": "^3.2.37"
"vue-router": "^4.1.5"
"vuex": "^4.0.2"
"vuex-persistedstate": "^4.1.0"

Answer 1

UPDATE_BOOKとUPDATE_CURRENTを変数として定義するか、文字列にする必要があります。
他には、refで定義した変数validに対して、「valid.value」を使わないと常にTrueになります。

const onsubmit = () => {
// validは, テスト用に設けた変数なので意味は無し
  if (valid.value) {
    store.dispatch('UPDATE_BOOK', Object.assign({}, book.value, form))
  }
  store.dispatch('UPDATE_CURRENT', null)  

  form.read = new Date()
  form.memo = ""
  router.push("/")
}