Vue.js+TypeScript＋Composition APIでのプロパティの正しい書き方がわかりません。

Question

前提

VueJS、TypeScriptともに初心者です。
Visual Studio Code＋Eslint＋VolarでVueJSをお勉強しています。

発生している問題

子コンポーネントにプロパティを持って、
親コンポーネントからバインドしたいだけなのですが、
Volarに怒られてしまいます。

プロパティの書き方、リアクティブ変数の書き方、何のどこが悪いのか、
正しい書き方（怒られない書き方）をご存じの方がおられましたら、
ご教授頂けないでしょうか？

ちなみに、コンパイルはでき、動きもしますし、Veturには怒られませんでした。
ただ、Veturは<script setup>構文をサポートしてないから、Volarを使えとグーグルさんに教えていただきましたので、
そのようにしています。

該当のソースコード

<template>
  <div v-if="mode != ''">{{ mode }}モードです</div>
</template>

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

const props = defineProps<{
  mode: {
    type: "" | "追加" | "編集" | "照会";
    default: "";
  };
}>();
</script>

ChildComponent.vueで発生しているエラー

<template>
  <ChildComponent :mode="mode" />
</template>

<script setup lang="ts">
import { Ref, ref } from "vue";
import ChildComponent from "../components/ChildComponent.vue";

const mode: Ref<"" | "追加" | "編集" | "照会"> = ref("");
</script>

ParentComponent.vueで発生しているエラー

Comments

[yuma.inaura]

コードをテキストでも載せませんか？

[hayashida]

早速のご指摘ありがとうございます。
コードのテキストを記載いたしました。

Answer 1

公式ドキュメントと書き方が違ってたので、直してみました。
これなら動くかもです。
https://v3.ja.vuejs.org/api/sfc-script-setup.html#defineprops-%E3%81%A8-defineemits

<template>
	<div v-if="props.mode !== ''">
		{{ props.mode }} モードです
	</div>
</template>

<script setup lang="ts">
import { PropType } from 'vue';
type Mode = '' | '追加' | '編集' | '照会';

const props = defineProps({
  mode: {
	type: String as PropType<Mode>,
	default: ""
  },
})
</script>

<template>
  <ChildComponent :mode=mode />
</template>

<script setup lang="ts">
import { ref } from "vue";
import ChildComponent from "../components/ChildComponent.vue";

type Mode = '' | '追加' | '編集' | '照会';

const mode = ref<Mode>('')
</script>

Comments

[hayashida]

すごいです！ありがとうございます！
公式ドキュメントの連携もありがとうございます。
ざっとみてみましたが、いまのところ、チンプンカンプンです。
時間をかけて熟読してみます。