Есть проект на vue с typescript. В нем два компонента ArrowsPage:
<template>
  <PageContainer :breadcrumbs="['Реестр', 'Стрелки']">
    <template #header>
      <el-row :gutter="20">
        <el-col :span="6">
          <ButtonWithTooltip
            tooltip-content="Добавить стрелку"
            button-style="primary"
            icon-image="plus"
            :scope-row="dialog.dialogItem"
            @click="handleAdd"
          />
        </el-col>
        <el-col :span="6" :offset="12" class="right-col">
          <ButtonWithTooltip
            tooltip-content="Загрузить"
            icon-image="download"
          />
          <ButtonWithTooltip tooltip-content="Выгрузить" icon-image="upload" />
        </el-col>
      </el-row>
    </template>
    <el-table :data="tableData" border>
      <el-table-column prop="id" label="Идентификатор" />
      <el-table-column prop="number" label="Номер" />
      <el-table-column prop="arrows" label="Стрелочный перевод" width="200" />
      <el-table-column prop="bs" label="Блок-участок" width="260" />
      <el-table-column prop="plusConnect" label="Связи '+'" />
      <el-table-column prop="minusConnect" label="Связи '-'" />
      <el-table-column prop="visible" label="Отрисовано" />
      <el-table-column
        prop=""
        label="Редактировать / Удалить"
        align="right"
        width="220"
      >
        <template #default="scope">
          <ButtonWithTooltip
            tooltip-content="Редактировать стрелку"
            icon-image="edit"
            button-text
            icon-color="#409eff"
            @click="handleEdit(scope.row)"
          />
          <ButtonWithTooltip
            tooltip-content="Удалить стрелку"
            icon-image="delete"
            button-text
            icon-color="#f56c6c"
            @click="handleRemove(scope.$index)"
          />
        </template>
      </el-table-column>
    </el-table>

    <ArrowsActionDialog
      v-if="dialog.visible"
      :arrow-data="dialog.dialogItem"
      :title="dialog.title"
      :visible="dialog.visible"
      @handle-close="(visible: boolean) => (dialog.visible = visible)"
      @save-arrow="saveArrowItem"
    ></ArrowsActionDialog>
  </PageContainer>
</template>

<script lang="ts">
import { defineComponent } from "vue";

import ArrowsActionDialog from "./ArrowsActionDialog.vue";
import type { arrowItem } from "./ArrowsPage.types";
import { PageContainer, ButtonWithTooltip } from "@shared";

export default defineComponent({
  name: "ArrowsPage",
  components: {
    ArrowsActionDialog,
    PageContainer,
    ButtonWithTooltip,
  },
  data() {
    return {
      dialog: {
        visible: false,
        title: "",
        dialogItem: Object as arrowItem | {} | null,
      },
      tableData: [
        {
          id: 111,
          number: 230,
          arrows: ["sdf", "sdfa"],
          bs: "234",
          plusConnect: "229",
          minusConnect: "231",
          visible: "230",
        },
        {
          id: 2222,
          number: 233,
          arrows: ["sad", "ssaa"],
          bs: "522",
          plusConnect: "232",
          minusConnect: "234",
          visible: "223",
        },
        {
          id: 3333,
          number: 233,
          arrows: ["sad", "ssaa"],
          bs: "522",
          plusConnect: "232",
          minusConnect: "234",
          visible: "223",
        },
        {
          id: 444,
          number: 233,
          arrows: ["sad", "ssaa"],
          bs: "522",
          plusConnect: "232",
          minusConnect: "234",
          visible: "223",
        },
      ],
    };
  },
  methods: {
    handleEdit(item: any) {
      // заголовок лучше задать в компоненте
      this.dialog.title = "Редактировать стрелку";
      this.dialog.visible = true;
      this.dialog.dialogItem = item;
    },
    handleRemove(index: number) {
      this.tableData.splice(index, 1);
    },
    handleAdd() {
      // заголовок лучше задать в компоненте
      this.dialog.title = "Добавить стрелку";
      this.dialog.dialogItem = null;
      this.dialog.visible = true;
    },
    saveArrowItem(arrowItem: any) {
      if (this.dialog.dialogItem) {
        // ??
        const index = this.tableData.findIndex(
          (item) => item.id === arrowItem.id,
        );
        if (index !== -1) {
          this.tableData[index] = { ...this.tableData[index], ...arrowItem };
        }
        this.dialog.dialogItem = {};
      } else if (arrowItem.id) {
        this.tableData.push(arrowItem);
      }
      this.dialog.visible = false;
    },
  },
});
</script>
И компонент ArrowsActionDialog:
<template>
  <ActionDialog
    title="title"
    :visible="dialog.visible"
    @handle-close="(visible: boolean) => (dialog.visible = visible)"
    @save="saveArrow"
  >
    <el-form :model="dialog.form" label-width="160px" label-position="top">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="ID стрелки">
            <el-input v-model="dialog.form.id" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="Номер стрелки">
            <el-input v-model="dialog.form.number" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="Связи '+'">
            <el-input v-model="dialog.form.plusConnect" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="Связи '-'">
            <el-input v-model="dialog.form.minusConnect" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="Блок-участок:">
            <el-input v-model="dialog.form.bs" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="Стрелочный перевод:">
            <el-input v-model="dialog.form.arrows" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </ActionDialog>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import type { arrowItem } from "./ArrowsPage.types";
import { ActionDialog } from "@shared";

export default defineComponent({
  name: "ArrowsActionDialog",
  components: {
    ActionDialog,
  },
  props: {
    // приветсти к типу
    arrowData: {
      type: Object,
      default: null,
    },
  },
  emits: ["saveArrow"],
  data() {
    return {
      dialog: {
        form: {
          id: 1,
          number: "",
          arrows: "",
          bs: "",
          plusConnect: "",
          minusConnect: "",
          visible: "",
        },
        visible: false,
      },
    };
  },
  mounted() {
    this.dialog.form = { ...this.arrowData };
  },

  methods: {
    saveArrow() {
      const { id, number, arrows, bs, plusConnect, minusConnect, visible } =
        this.dialog.form;
      // вынести в тип
      const newItem: {
        id: number;
        number: string;
        arrows: string;
        bs: string;
        plusConnect: string;
        minusConnect: string;
        visible: string;
      } = {
        id,
        number,
        arrows,
        bs,
        plusConnect,
        minusConnect,
        visible,
      };
      this.$emit("saveArrow", newItem);
    },
  },
});
</script>

export type arrowItem = {
  id: string;
  number: string;
  arrows: string;
  bs: string;
  plusConnect: string;
  minusConnect: string;
  visible: string;
};
Как правильно написать типы в arrowsActionDialog чтобы не было ошибок линтера? Первая ошибка в mounted подсвечивается this.dialog.form, описание ошибки Type '{ [x: string]: any; }' is missing the following properties from type '{ id: any; number: string; arrows: string; bs: string; plusConnect: string; minusConnect: string; visible: string; }': id, number, arrows, bs, and 3 more.ts(2740). Вторая ошибка в ArrowsPage в template подсвечивается передачу пропса :arrow-data, описание ошибки Type '{} | { id: string; number: string; arrows: string; bs: string; plusConnect: string; minusConnect: string; visible: string; } | null' is not assignable to type 'Record<string, any> | undefined'.
  Type 'null' is not assignable to type 'Record<string, any> | undefined'.ts(2322)
ArrowsActionDialog.vue(61, 5): The expected type comes from property 'arrowData' which is declared here on type 'ComponentProps<DefineComponent<{ arrowData: { type: ObjectConstructor; default: null; }; }, unknown, { dialog: { form: { id: number; number: string; arrows: string; bs: string; plusConnect: string; minusConnect: string; visible: string; }; visible: boolean; }; }, ... 9 more ..., {}>>'.
Третья ошибка я думаю, что неправильно затипизировал arrowData в ArrowsActionDialog