Setting initial value as object via v-model in child component made of DevExtreme DxSelectBox not working in Vue3 composition API

I have made a child component – Dropdown based on Devextreme DxSelectBox.
I set in parent component v-model as attribute and forward to it an variable as ref, which is set to initial selected valueconst item = ref({ value: "option 1", }), but the DxSelectBox is empty when loading the project.
Child component – Dropdown is emitting the right selected option, but unfortunately the initial selected value is not set.
Code for Parent App.vue component is:

<template>
  <Dropdown :items="items" v-model:option="item" />
  <div class="emitting">Emitting: {{ item }}</div>
</template>

<script>
import { ref } from "vue";
import Dropdown from "./components/Dropdown.vue";
export default {
  name: "App",
  components: {
    Dropdown: Dropdown,
  },
  setup(props, context) {
    const emitValue = (e) => {
      context.emit("update:option", e.value);
    };

    const items = ref([
      {
        value: "option 1",
      },
      {
        value: "option 2",
      },
      {
        value: "option 3",
      },
    ]);
    const item = ref({
      value: "option 1",
    });

    return {
      items,
      item,
      emitValue,
    };
  },
};
</script>

<style>
@import "https://cdn3.devexpress.com/jslib/18.2.8/css/dx.light.css";
@import "https://cdn3.devexpress.com/jslib/18.2.8/css/dx.common.css";
</style>

and code for Dorpdown.vue component is:

<template>
  <div class="dx-field">
    <DxSelectBox
      :data-source="items"
      :value="option"
      @valueChanged="emitValue"
      :width="width"
      :height="height"
      :drop-down-options="{ width: width }"
      display-expr="value"
      :disabled="disabled"
      :read-only="readOnly"
      :hint="hint"
      :placeholder="placeholder"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, watch, ref } from "vue";
import DxSelectBox from "devextreme-vue/select-box";

export default defineComponent({
  name: "DpmDropdown",
  components: {
    DxSelectBox,
  },
  emits: ["update:option"],
  props: {
    label: { type: String, default: "" },
    showLabel: { type: Boolean, default: true },

    headingTooltip: { type: String, default: "" },
    items: { type: Array, default: () => [] },
    option: { type: Object, default: () => ({}) },
    width: { type: [Number, String], default: "100%" },
    height: { type: String, default: "40px" },
    icon: { type: String, default: "" },
    hint: { type: String, default: "" },
    disabled: { type: Boolean, default: false },
    readOnly: { type: Boolean, default: false },
    placeholder: { type: String, default: "" },
  },

  setup(props, context) {
    const emitValue = (e: any) => {
      context.emit("update:option", e.value);
    };

    return {
      emitValue,
    };
  },
});
</script>

The link for sandbox project is here:
enter link description here

Can somebody help?