Vue version

3.2.40

Link to minimal reproduction

https://sfc.vuejs.org/#__SSR__eNqNUktOwzAQvcrIq1ZqY7qNkiLEBRDqru6iJJOSKnEs2wlCIUvEDRBLxCHYcB1A4haM86nKn41lz+fNm/dcsyOlvKpE5rPARDpVFgzaUkG2lptQMGsEmwuZ5qrQFmqIilyVFuMJaEyggUQXOQhGCILtyhZo7JDxuHu5Ea4gKiSlbGozXFwqhNDBjGbjDxlD4aWQALU7oAv6u9GBsTqVm/loNIaQuLmSvshhetU6Kwk5DGEGh8Tg9f7m7eFuJhj49Hq5fnx+uu1ijpHrpfEAjZArIQPeqUC4gcVcZWuL7YwgTqt+WNDu57cTnUQt5+XBymtvNId3HbxrCfgeEJuwTqRpvlbe1hSSlG/3FH2CBPeHzXthHe9za5XxOTdJ5MTcGq/QG043T5fSpjl6aPLpmS4uDGoCFmyyh8EpWKGeapQxatS/YX4q/YLbi9XQKoO1//s9ltyp4bi38fSb/xNjkko80YUyQStBb33nOFztNw/fgJjMR+TgX87VdQvWEPWfvGneAfl7EzY=

Steps to reproduce

Run the project on SFC Playground

What is expected?

no warning

What is actually happening?

warning: Invalid prop: type check failed for prop "title". Expected String | Null, got Object

System Info

System:
    OS: Linux 5.19 Arch Linux
    CPU: (4) x64 Intel(R) Core(TM) i5-7500 CPU @ 3.40GHz
    Memory: 3.57 GB / 15.51 GB
    Container: Yes
    Shell: 5.9 - /usr/bin/zsh
  Binaries:
    Node: 16.15.1 - ~/.asdf/installs/nodejs/16.15.1/bin/node
    Yarn: 2.4.3 - ~/.asdf/installs/nodejs/16.15.1/.npm/bin/yarn
    npm: 8.11.0 - ~/.asdf/plugins/nodejs/shims/npm
  Browsers:
    Chromium: 106.0.5249.103
    Firefox: 105.0.3
  npmPackages:
    vue: ^3.2.40 => 3.2.40

Any additional comments?

No response

It's by design I guess. props is a reactive variable, so Ref unwraps automatically.

Maybe there's another way to implement it: make title a function or object, title: string | (() => ComputedRef<string>) | { ref: ComputedRef<string> }

See also: https://github.com/vuejs/core/issues/4936#issuecomment-967097508

make title object. This is my current plan. But still suspicious

https://vuejs.org/guide/essentials/reactivity-fundamentals.html#ref-unwrapping-in-templates

This doesn't fit my scenario @jacekkarczmarczyk

@178me You can do this:

<script setup lang="ts">
import { computed, ref, reactive } from "vue"
import Test from "./Test.vue"
const titleType = ref(1)
const titles = [
  {
    title: computed<string>(() =>
      titleType.value === 1 ? "标题1" : "其他标题"
    )
  }
]
</script>
<template>
  <div>
    <!-- use .value -->
    <Test :title="titles[0].title.value" />
  </div>
</template>

or

<script setup lang="ts">
import { computed, ref, reactive } from "vue"
import Test from "./Test.vue"
const titleType = ref(1)

// use reactive
const titles = reactive([
  {
    title: computed<string>(() =>
      titleType.value === 1 ? "标题1" : "其他标题"
    )
  }
])
</script>
<template>
  <div>
    <Test :title="titles[0].title" />
  </div>
</template>

The first method is not suitable for my needs The second way can be tried tomorrow

This is expected as @jacekkarczmarczyk pointed you. In your case you do need that .value