propsでコンポーネントにコンポーネントを安全に渡したい

Question

const app = Vue.createApp({
  name: "TheApp",
  template: `
    <keep-alive>
      <component :is="show_component" ref="page" :search="$refs.search"></component>
    </keep-alive>
    <search ref="search"></search>
  `,
    }

Vue3で動的コンポーネントを利用してページ切り替えをしています。
そのうちいくつかのコンポーネントは、appで定義しているsearchコンポーネントを利用してほしいため、
propsで渡すようにしました。
searchコンポーネントを利用するコンポーネントでは、

  props: {
    search: Object,
  },

と設定して無事に利用できたのですが、searchコンポーネントを利用しない多数のコンポーネントでは

Cannot convert object to primitive value

というエラーが出てきます。
全てのコンポーネントでpropsにsearch: Objectを設定すれば問題ないのでしょうが、
まったく利用しない予定のコンポーネント全てに設定してまわるのが大変です。
なんとか穏便に、searchコンポーネントを利用しないコンポーネントでsearchを無視して貰う方法はないでしょうか？

Answer 1

自己解決しました。こういう感じのコードになりました。

const app = Vue.createApp({
  name: "TheApp",
  template: `
    <keep-alive>
      <component :is="show_component" ref="page" :global="global()"></component>
    </keep-alive>
    <search ref="search"></search>
  `,
  methods: {
    global: function(){
      return {
        search: this.$refs.search,
      }
    }

Vue2のマニュアルですが、こう書いてありました。

$refsはコンポーネントの描画後にデータが反映されるだけで、リアクティブではありません。
子コンポーネントへの直接操作のための、退避用ハッチのような意味合いです
(テンプレート内または算出プロパティから$refsにアクセスするのは避けるべきです)。

それを踏まえて、解決のためのポイントは2点でした。
・computedではなくmethodsで渡す -> computedで渡そうとしたらglobal.searchはundefinedになる
・コンポーネントを直接ではなく、オブジェクトで包む -> return this.$refs.searchのように直接返すとエラーが解消されない

Answer 2

  props: {
    search: {
      type: Object,
      required: false,
      default: () => {},
    },
  },

Comments

[zohnam]

このprops設定をどう活用するのでしょうか？