V-modelでバインドしたinputタグの内容をaxios経由でPOSTしたい。Vue.js

V-modelでバインドした内容をaxios経由でPOSTしたいのですが、以下の<input>タグ、V-modelでバインドした箇所の入力内容が「undefined」となり、POSTできません。

javascript
    <!-- タイトル入力 -->
    <div>
      <input v-model="title" type="text" name="title" placeholder="タイトル">
    </div>
    <div>
    <!-- コメント入力エリア -->
      <textarea  v-model="comment"  name="comment" cols="30" rows="10" placeholder="コメント入力"></textarea>
    </div>

POSTを行う関数は以下です。
data.append("title", this.title);の箇所で、「 Cannot read properties of undefined (reading 'title')」となっています。

javascript
    // Canvasのデータをblob化/title/commetをaxiosでPOST
    saveCanvas: (canvas_id)=> {
      const type = "image/png";
      const canvas = document.getElementById(canvas_id);
      const dataurl = canvas.toDataURL("image/jpeg", 0.85);
      const bin = atob(dataurl.split(",")[1]);
      const buffer = new Uint8Array(bin.length);
      for (let i = 0; i < bin.length; i++) {
        buffer[i] = bin.charCodeAt(i);
      }

      const blob = new Blob([buffer.buffer], { type: type });

      //new FormData() を作成
      const data = new FormData();
      data.append("canvas", blob, "png");
      data.append("title", this.title);
      data.append("comment", this.comment);

    
      axios
        .post("/api/images", data)
        .then((res) => {
          console.log("success");
        })
        .catch((error) => {
          new Error(error);
        });
              console.log("hello");
    },

単一テンプレートのコード全体は以下のように書いています。

javascript
<template>
  <div>
    <!-- 画像エリア -->
    <div id="image_area">
      <canvas ref="preview" id="preview"></canvas>
      <input type="file" name="image" accept="image/*" ref="selectimage" @change="previewImage"/>
    </div>
    <p>
      <input type="text" id="canvas_text" value="" />
      <button type="button" @click="drawText('preview', 'canvas_text')">
        文字を描く
      </button>
    </p>

    <!-- タイトル入力 -->
    <div>
      <input v-model="title" type="text" name="title" placeholder="タイトル">
    </div>
    <div>
    <!-- コメント入力エリア -->
      <textarea  v-model="comment"  name="comment" cols="30" rows="10" placeholder="コメント入力"></textarea>
    </div>
    <button @click="saveCanvas('preview')">アップロード</button>

    <!-- input内容を表示 -->
    <div>
    <p>{{ title }}</p>
    <p>{{ comment }}</p>
    </div>


  </div>
</template>
 
<script>
export default {

  data(){
    return {
      title:"",
      comment:""
    }
  },

  methods: {
    // canvasの画像をinput type="file"にプレビュー
    previewImage: function () {
      let file = this.$refs.selectimage.files; //ファイル情報の取得
      const canvas = this.$refs.preview; //canvasタグ
      const fileReader = new FileReader();
      fileReader.onload = function () {
        const ctx = canvas.getContext("2d");
        const image = new Image();
        image.src = fileReader.result;
        image.onload = function () {
          canvas.width = image.width;
          canvas.height = image.height;
          ctx.drawImage(image, 0, 0);
        };
      };
      fileReader.readAsDataURL(file[0]);
    },

    //キャンバスに文字を描く
    drawText: (canvas_id, text_id)=> {
      const canvas = document.getElementById(canvas_id);
      const ctx = canvas.getContext("2d");
      const text = document.getElementById(text_id);
      //文字のスタイルを指定
      ctx.font = "32px serif";
      ctx.fillStyle = "#404040";
      //文字の配置を指定（左上基準にしたければtop/leftだが、文字の中心座標を指定するのでcenter
      ctx.textBaseline = "center";
      ctx.textAlign = "center";
      //座標を指定して文字を描く（座標は画像の中心に）
      const x = canvas.width / 2;
      const y = canvas.height / 2;
      ctx.fillText(text.value, x, y);
    },

    // Canvasのデータをblob化/title/commetをaxiosでPOST
    saveCanvas: (canvas_id)=> {
      const type = "image/png";
      const canvas = document.getElementById(canvas_id);
      const dataurl = canvas.toDataURL("image/jpeg", 0.85);
      const bin = atob(dataurl.split(",")[1]);
      const buffer = new Uint8Array(bin.length);
      for (let i = 0; i < bin.length; i++) {
        buffer[i] = bin.charCodeAt(i);
      }

      const blob = new Blob([buffer.buffer], { type: type });

      //new FormData() を作成
      const data = new FormData();
      data.append("canvas", blob, "png");
      data.append("title", this.title);
      data.append("comment", this.comment);

    
      axios
        .post("/api/images", data)
        .then((res) => {
          console.log("success");
        })
        .catch((error) => {
          new Error(error);
        });
    },
  },
};
</script>