Vue 3 how to refer to a component via this.$refs?

Question

Vue.js

Hello, there is such a library of Element Plus components . Where did I get the Tree component, from which you can get the selected values ​​​​using this.$refs.tree.getCheckedKeys- judging by the documentation, but how to use it in version 3 with the Composition API?

<template>
  <div class="md:col-span-1">
    <el-tree
        empty-text="Пусто"
        class="filter-tree"
        :data="rubricator"
        :props="defaultProps"
        default-expand-all
        highlight-current
        show-checkbox
        node-key="id"
        :filter-node-method="filterNode"
        ref="tree"      
        @check="getCheckedNodes"
    >
    </el-tree>
  </div>
</template>

<script>
import { ref, onMounted, computed } from 'vue'
import { useMainStore } from '../store'

export default {
  name:"RubricsTree",
  setup () {
    const tree = ref(null)
    const defaultProps = ref ({
      id: "id",
      children: "sub",
      label: "text",
    })
    onMounted(() => {
      console.log(tree);
    });
    const main = useMainStore()
    return {
      defaultProps,
      rubricator: computed(() => main.getRubrics),
    }  
  }
}
</script>

Answer 1

const tree = ref(null)

It's already started, okay. Now we need to return this tree from setup so that it can be used in the template:

return {
  tree,
  ...

<el-tree
  ref="tree"
  ...

Well, when you want to get the selected values ​​- tree.value.getCheckedKeys().