Composition APIでPrimeVueのDynamicDialogを使おうとしたらDialogが閉じれず困った件（解決）

## 概要
タイトルの通り。
~~未解決ですが調べて分かったことをメモ。~~

**2022/07/23追記**
なんと@MertSincanさん(PrimeVueの開発者の方)から本記事へコメントを頂き、解決することができそうです!
CodeSandboxに修正後のソースが上がっていますので、実際の動作は下記から確認ください。

- CodeSandbox
  - [crimson-sound-7c3gtq](https://codesandbox.io/s/crimson-sound-7c3gtq?file=/src/components/testDialog.vue)

## 使おうとしたもの
[PrimeVue - Dynamic Dialog](https://www.primefaces.org/primevue/dynamicdialog)
PrimeVue ver 3.15.0

## 事象
Dialogの子コンポーネントからダイアログを閉じようとするとエラーが発生。

### エラー内容
```
Uncaught TypeError: dialogRef.close is not a function
    at Proxy.closeDialog (index.js?e1de:39:1)
    at onClick._cache.<computed>._cache.<computed> (templateLoader.js?e847:21:1)
    at callWithErrorHandling (runtime-core.esm-bundler.js?d2dd:155:1)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?d2dd:164:1)
    at HTMLButtonElement.invoker (runtime-dom.esm-bundler.js?2725:366:1)
```

### ソース例
- ダイアログ呼び元
```vue
<template>
  <div class="test">
    <Button type="button" label="ダイアログ表示" @click="showDialog" />
  </div>
  <DynamicDialog />
</template>

<script lang="ts">
import { useDialog } from 'primevue/usedialog';
import testDialog from './dialog/testDialog.vue';

export default {
  setup() {
    const dialog = useDialog();

    return {
      showDialog() {
        dialog.open(testDialog);
      },
    };
  },
};
</script>

```

- ダイアログ側
```vue
<template>
  <div class="testDialog">
    test
    <Button label="閉じる" @click="onClose()" />
  </div>
</template>

<script lang="ts">
import { inject } from 'vue';

export default {
  setup() {
    const dialogRef = inject<any>('dialogRef'); // <any>はコンパイルエラー回避のため
    return {
      onClose: () => {
        if (dialogRef != null) dialogRef.close(); // nullチェックはコンパイルエラー回避のため
      },
    };
  },
};
</script>
```

## 調べたこと

**2022/07/23追記**
以下、Vueをよくわかっていない人が苦戦しているだけの内容なので縮めます...

<details> 

- ダイアログ側のコンポーネントをOptions Apiで書くと動いた(Composition Apiで書きたいのじゃが..)
    - ソース例
```vue
<template>
  <div class="testDialog">
    test
    <Button label="閉じる" @click="onClose()" />
  </div>
</template>

<script>
export default {
  inject: ['dialogRef'],
  methods: {
    onClose() {
      this.dialogRef.close();
    },
  },
};
</script>
```

- PrimeVueのDialogコンポーネントはOptions Apiで書かれている
    - [Githubのソース](https://github.com/primefaces/primevue/blob/master/src/components/dialog/Dialog.vue)
    - そのため、provide側がOptions Api、inject側がComposition Apiの書き方になっていた
        - このパターンの記述は[公式ガイド](https://vuejs.org/guide/components/provide-inject.html)には見当たらない
            - できないってこと！？
- そもそも、PrimeVueのComposition Api例もおかしい(Options Apiとごっちゃになっている気が...)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560594/94e4240a-b881-9465-6408-1439ce1a599a.png)

</details>

## 解決編

**2022/07/23追記**
ダイアログ側で`dialogRef`に`.value`をつけるだけでよいとのことです！（己の無知を痛感...）
（まだ私のローカルPCでは試せていませんが、取り急ぎ追記です）

[公式ドキュメント](https://www.primefaces.org/primevue/dynamicdialog)も修正して頂きました！
@MertSincan Thanks!

```vue
<template>
  <div class="testDialog">
    test
    <Button label="閉じる" @click="onClose()" />
  </div>
</template>

<script lang="ts">
import { inject } from 'vue';

export default {
  setup() {
    const dialogRef = inject<any>('dialogRef');
    return {
      onClose: () => {
        if (dialogRef != null) dialogRef.value.close();
      },
    };
  },
};
</script>
```


## 結論
~~ver 3.15.0でのDynamicDialogの利用はあきらめて、Dialogの表示/非表示で実装する。~~
~~（動かす方法はあるのかもしれませんが…）~~

DynamicDialog使っていきましょう！！！