Stworzyłem aplikację w Vue.js. Dlaczego podczas wykonania funkcji submit w printer-posnet-card.vue model.dto.target jest undefined pomimo ustawienia wartości w <printer-posnet-target-selector v-model="model.target" />?
	
/// printers-posnet-card.vue

<template>
  <titled-card :title="title" toolbar close-button @close="discard">
    <loading-container
      :is-loaded="isLoaded"
      fluid
      class="ma-1 pa-0 pr-3"
      style="min-width: min(700px, 95vw)">
      <v2-form :validator="formRef">
        <v-row dense>
          <v-col cols="8" sm="6">
            <v2-text-field
              v-model="model.name"
              :rules="nameRules"
              :readonly="readonly"
              class="mb-2"
              label="Nazwa" />
          </v-col>
          <v-col cols="8" sm="6">
            <v2-text-field
              v-model="model.printerId"
              :rules="nameRules"
              :readonly="readonly"
              class="mb-2"
              label="Id drukarki" />
          </v-col>
        </v-row>

        <v-row dense>
          <v-col cols="12" sm="6">
            <v2-text-field
              v-model="model.ipAddress"
              :rules="ipAddressRules"
              :readonly="readonly"
              class="mb-2"
              label="Adres IP" />
          </v-col>
          <v-col cols="12" sm="6">
            <printer-posnet-target-selector v-model="model.target" />
          </v-col>
        </v-row>

        <v-row dense>
          <v-col cols="12" sm="6" class="d-flex align-center">
            <v-switch
              v-model="model.isActive"
              :disabled="readonly"
              label="Aktywny"
              class="ma-0" />
          </v-col>
          <v-col cols="12" sm="6">
            <organization-unit-selector
              v-model="model.organizationUnitId"
              :rules="organizationUnitIdRules"
              :readonly="readonly"
              label="Jednostka Organizacyjna"
              required />
          </v-col>
        </v-row>

        <v-row justify="end">
          <v-col cols="auto">
            <submit-discard-async-buttons :submit="submit" @discard="discard" />
          </v-col>
        </v-row>
      </v2-form>
    </loading-container>
  </titled-card>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, ref } from "@vue/composition-api";
import LoadingContainer from "@/components/loading/loading-container.vue";
import SubmitDiscardAsyncButtons from "@/components/action-buttons/submit-discard-async-buttons.vue";
import axios from "@/lib/axios";
import TitledCard from "@/components/simple/titled-card.vue";
import { RulesUtils } from "@/lib/rules-utils";
import V2Form from "@/compatibility-layer/components/v2-form.vue";
import V2TextField from "@/compatibility-layer/components/v2-text-field.vue";
import V2Autocomplete from "@/compatibility-layer/components/v2-autocomplete.vue";
import V2Select from "@/compatibility-layer/components/v2-select.vue";
import V2FormValidator from "@/compatibility-layer/components/v2-form-validator";
import PrinterPosnet from "@/views/commerce/printers-posnet/printer-posnet";
import PrinterPosnetTargetSelector from "@/views/commerce/printers-posnet/printer-posnet-target-selector.vue";
import OrganizationUnitSelector from "@/views/commerce/common/selectors/organization-unit-selector.vue";

const PrinterPosnetCard = defineComponent({
  components: {
    TitledCard,
    SubmitDiscardAsyncButtons,
    V2Autocomplete,
    V2TextField,
    V2Form,
    V2Select,
    LoadingContainer,
    PrinterPosnetTargetSelector,
    OrganizationUnitSelector
  },

  props: {
    value: {
      type: String,
      required: false,
      default: null
    },

    readonly: {
      type: Boolean,
      required: false,
      default: false
    }
  },

  emits: ["close"],

  setup(props, context) {
    const isLoaded = ref(false);
    const model = ref(
      props.value ? PrinterPosnet.fromDto({}) : PrinterPosnet.empty()
    );
    const formRef = ref(V2FormValidator.create());

    const organizationUnitIdRules = [
      v => (!!v && Number(v) > 0) || "Niepoprawne ID jednostki organizacyjnej"
    ];

    onMounted(async () => {
      await loadData();
    });

    const loadData = async () => {
      if (props.value) {
        const response = await axios.get(`/api/services/app/PrinterPosnet/${props.value}`);
        model.value = PrinterPosnet.fromDto(response.data.result);
      }

      isLoaded.value = true;
    };

    const isNew = computed(() => !props.value);

    const submit = async () => {
      if (!formRef.value.validate()) return;
      const payload = { dto: model.value.dto };
      if (isNew.value) {
        await axios.post("/api/services/app/PrinterPosnet/", payload.dto);
      } else {
        await axios.put(`/api/services/app/PrinterPosnet/${props.value}`, payload.dto);
      }

      context.emit("close", true);
    };

    const title = computed(() => {
      const prefix = "Zarządzanie Drukarkami Posnet";
      const suffix = isNew.value ? "Nowa drukarka" : `Edycja drukarki: ${model.value.name}`;
      return `${prefix} - ${suffix}`;
    });

    const nameRules = RulesUtils.MandatoryString(128);
    const ipAddressRules = [
      v => /^(25[0-5]|2[0-4]\d|[01]?\d\d?)\.(25[0-5]|2[0-4]\d|[01]?\d\d?)\.(25[0-5]|2[0-4]\d|[01]?\d\d?)\.(25[0-5]|2[0-4]\d|[01]?\d\d?)$/.test(v) || "Niepoprawny adres IP"
    ];

    return {
      isLoaded,
      model,
      formRef,
      submit,
      discard: () => context.emit("close", false),
      nameRules,
      ipAddressRules,
      organizationUnitIdRules,
      title,
      isNew
    };
  }
});

export default PrinterPosnetCard;
</script>

/// printer-posnet.ts

import { GenericNamedGuidEntity } from "@/views/commerce/common/named-item";
import PrinterPosnetTarget from "@/views/commerce/printers-posnet/printer-posnet-target";

export default class PrinterPosnet extends GenericNamedGuidEntity {
  printerId: string | null = null;
  ipAddress: string | null = null;
  target: PrinterPosnetTarget;
  organizationUnitId: number;
  isActive: boolean = false;

  public static fromDto(dto: any): PrinterPosnet {
    const entity = new PrinterPosnet();
    entity.readDto(dto);
    return entity;
  }

  public static empty(): PrinterPosnet {
    const entity = new PrinterPosnet();
    return entity;
  }

  protected readDto(dto: any) {
    super.readDto(dto);
    this.printerId = dto.printerId;
    this.ipAddress = dto.ipAddress;
    this.target = dto.target ? PrinterPosnetTarget.getById(dto.target) : PrinterPosnetTarget.instance.reception;
    this.organizationUnitId = dto.organizationUnitId;
    this.isActive = dto.isActive;
  }

  get displayName() {
    return `${this.name} (${this.id})`;
  }

  get dto(): any {
    const baseDto: any = {
      name: this.name,
      isActive: this.isActive,
      printerId: this.printerId,
      ipAddress: this.ipAddress,
      organizationUnitId: this.organizationUnitId,
      target: this.target.id
    };

    if (this.id !== null && this.id !== undefined) {
      baseDto.id = this.id;
    }

    return baseDto;
  }
}

/// printer-posnet-target.ts

export default class PrinterPosnetTarget {
  name: string;
  id: number;

  public static instance = {
    reception: new PrinterPosnetTarget(0, "Recepcja"),
    shop: new PrinterPosnetTarget(1, "Sklep"),
    kiosk: new PrinterPosnetTarget(2, "Kiosk")
  };

  public static readonly All: PrinterPosnetTarget[] = Object.values(PrinterPosnetTarget.instance);

  constructor(id: number, name: string) {
    this.name = name;
    this.id = id;
  }

  static getById(id: number | null): PrinterPosnetTarget {
    return PrinterPosnetTarget.All.find(v => v.id === id) ?? PrinterPosnetTarget.instance.reception;
  }

  static getByName(name: string): PrinterPosnetTarget {
    return PrinterPosnetTarget.All.find(v => v.name === name) ?? PrinterPosnetTarget.instance.reception;
  }
}

/// printer-posnet-target-selector.vue

<template>
    <v-autocomplete
      v-model="model"
      dense
      :items="items"
      hide-details
      :readonly="readonly"
      :filled="readonly"
      item-text="name"
      item-value="name"
      label="Miejsce przeznaczenia"
      :rules="rules"
      outlined
      :clearable="!required"
      :loading="isLoading"
      placeholder="Dowolny" />
  </template>

  <script lang="ts">
  import { defineComponent, ref, computed, watch } from "@vue/composition-api";
  import PrinterPosnetTarget from "@/views/commerce/printers-posnet/printer-posnet-target";
  import { RulesUtils } from "@/lib/rules-utils";

  export default defineComponent({
    name: "PrinterPosnetTargetSelector",
    props: {
      value: {
        type: String,
        required: true
      },
      readonly: {
        type: Boolean,
        required: false,
        default: false
      },
      required: {
        type: Boolean,
        required: false,
        default: false
      }
    },
    setup(props, context) {
      const model = ref<string>(props.value);
      const isLoading = ref(false);

      const items = computed(() => PrinterPosnetTarget.All);

      watch(
        () => props.value,
        (newValue) => {
          if (newValue !== model.value) {
            model.value = newValue;
          }
        }
      );

      watch(model, (newValue) => {
        context.emit("input", newValue);
      });

      const rules = computed(() => {
        return props.required && !props.readonly ? [RulesUtils.NotEmpty] : [];
      });

      return {
        model,
        items,
        rules,
        isLoading
      };
    }
  });
  </script>