Composition API - how to access an object inside it in VUE.js?

Question

JavaScript

Cannot figure out how to resolve this error:
Cannot read properties of undefined (reading 'deadLine')
An error occurred while reading the deadLine property in the deadLineTimestamp property of one data object .
How can this error be resolved?

The task is generally to take from the date and send it to the server in the timestamp format.

<template>
  <form class="card" @submit.prevent="createTask">
    <h1>{{ titleblock }}</h1>
    <div class="form-control">
      <label for="title">Название</label>
      <input type="text" id="title" v-model="title">
    </div>

    <div class="form-control">
      <label for="date">Дата дэдлайна</label>
      <input type="date" id="date" v-model="deadLine">
    </div>

    <div class="form-control">
      <label for="description">Описание</label>
      <textarea id="description" v-model="description"></textarea>
    </div>

    <button class="btn primary">Создать</button>
  </form>
</template>

<script>
import { ref, reactive, toRefs } from 'vue';
import { useStore } from 'vuex';

export default {
  setup() {
    const store = useStore();
    const title = ref('Создать новую задачу!');

    const data = reactive({
      title: '',
      deadLine: new Date(),
      deadLineTimestamp: new Date(this.deadLine).getTime(), //ОШИБКА
      description: ''
    });

    function createTask() {
      store.dispatch('getTasks', data);
    }

    return {
      titleblock: title,
      ...toRefs(data),
      createTask
    };
  }
};
</script>

Answer 1

Remove deadLineTimestamp from data, pass data to action instead

{
  title: data.title,
  deadLineTimestamp: new Date(data.deadLine).getTime(),
  description: data.description,
}