Composition-apiにおけるrefについて

概要

vue3でmaterial design webのbuttonを自前でコンポーネント化しようとミニマムですが遊んでいます

問題

material designのbuttonにはクリック時などにエフェクトを出したい場合はMDCRipple.attachTo()にElementを渡す必要があるのですが、今回は渡すElementをvueのrefを使って渡そうと考えました。

composition-apiでは公式サイトで書かれているようにtemplateのrefに合わせた変数をsetup()内で定義することで取得できるのかと思い、このように書きました。
しかしながら、onMountedでconsole.logで吐き出してもvalueの中身はundefinedになってしまい、上手く取れませんでした。

refを取得する方法が間違っているのかと考えてはいるのですが、どのように取得すればいいのかわからない状態です。
詳しい方がいらっしゃったら教えていただけると

余談

なぜ既にコンポーネント化しているライブラリを使わないのか、というのはリリースが2017年と適切にメンテナンスされているのかが怪しいのと、自分でコンポーネント化するという経験をしてみたかったからです。

自己解決しました。
refで宣言した変数をreturnでtemplateから参照できるようにしていなかったために、undefinedになっていたみたいです。

結果としては

return {
  buttonRef
}