「[Vue warn]The data property "" is already declared as a prop. Use prop default value instead.」の対策

事象

Vue.jsにて、以下のようなコードで親コンポーネントから子コンポーネントに値を渡した時にコンソールでタイトルのVue warnが表示されました。

// 親コンポーネント
...
<child-component :hoge="hoge" />
...

// 子コンポーネント
<input v-model="localHoge" />
...
@Component
class Hoge {
  localHoge: string | null = null;
  @Prop() hoge: string | null = null;

  created() {
    this.localHoge = this.hoge;
  }
  ...
}

環境

Vueバージョン：2.7.13
Typescriptで記載
単一ファイルコンポーネントで記載

調査

コンソールのwarnを追っていくと、vue.runtime.esm.jsのinitDataという関数でエラーが出ているようでした。
該当箇所はこんな感じ

function initData(vm) {
  var data = vm.$options.data;
  data = vm._data = isFunction(data) ? getData(data, vm) : data || {};
  if (!isPlainObject(data)) {
    data = {};
    process.env.NODE_ENV !== 'production' &&
      warn('data functions should return an object:\n' +
        'https://v2.vuejs.org/v2/guide/components.html#data-Must-Be-a-Function', vm);
  }
  // proxy data on instance
  var keys = Object.keys(data);
  var props = vm.$options.props;
  var methods = vm.$options.methods;
  var i = keys.length;
  while (i--) {
    var key = keys[i];
    if (process.env.NODE_ENV !== 'production') {
      if (methods && hasOwn(methods, key)) {
        warn("Method \"".concat(key, "\" has already been defined as a data property."), vm);
      }
    }
    if (props && hasOwn(props, key)) { // <---- ここに引っかかってエラーになっていた
      process.env.NODE_ENV !== 'production' &&
        warn("The data property \"".concat(key, "\" is already declared as a prop. ") +
          "Use prop default value instead.", vm);
    }
    ...

どうやらpropsとdataで同じプロパティがあると引っかかるようです。

原因

原因は子コンポーネントのpropsの定義方法でした。

@Prop() hoge: string | null = null;

↑こう書くと、内部的にpropsとdata両方に変換されてしまうようです。

以下のように書けばエラーを回避できました。

@Prop({default: ''}) hoge?: string | null;

(warn文にUse prop default value instead.とあったのでヒントは出てたようです...)

参考：https://qiita.com/simochee/items/e5b77af4aa36bd0f32e5#prop など