_vm.$refs.menu.open is not a function - vue.js

Question

I'm using vue-context to modify the default context menu, which I call from a component but when I try to interact with it I get an error, here's my code
<!-- Main -->
<p #contextmenu.prevent="$refs.menu.open">test</p>
<Context reference="menu" />
<script>
import Context from './map/context.vue'
export default { components: { Context } }
</script>
<!-- Component -->
<vue-context :ref="reference" :close-on-click="true" :close-on-scroll="true">
<li>
<a>
Do something
</a>
</li>
<li>
<a>
Do something else
</a>
</li>
</vue-context>
<script>
import VueContext from 'vue-context'
import 'vue-context/dist/css/vue-context.css'
export default {
props: ['reference'],
components: {
VueContext
}
}
</script>
When I right click on the page, I get the error _vm.$refs.menu.open is not a function

Answer 1

Because you wrapped VueContext inside a separate vue instance, the outer Vue instance (the one containing the #contextmenu call) does not have a $refs.menu. You can access the child's $refs by setting a ref on the child itself:
<p #contextmenu.prevent="$refs.wrapper.$refs.menu.open">test</p>
<Context ref="wrapper" reference="menu" />
See it working here.
I'd also argue you shouldn't pass the string 'menu' from parent but specify it directly inside <Context>'s template.
Dynamic props only make sense when you have some benefit from them changing value, which is clearly not the case here. You need that child ref to always be 'menu' so you can access its methods:
<p #contextmenu.prevent="$refs.wrapper.$refs.menu.open">test</p>
<Context ref="wrapper" />
Context.vue:
<template>
<vue-context ref="menu" :close-on-click="true" :close-on-scroll="true">
<li><a>Do something</a></li>
<li><a>Do something else</a></li>
</vue-context>
</template>
<script>
import VueContext from "vue-context";
import "vue-context/dist/css/vue-context.css";
export default { components: { VueContext } };
</script>
To summarize: $refs is a unified mechanism allowing you to access template elements, whether they're DOM elements or Vue instances.
Each component only contains its own $refs. To access the $refs of one of its children, you have to give the child a ref in parent scope and use $refs on that particular reference.
This actually makes a lot of sense in a scenario where you want multiple context menus with different contents for different items in your parent component (although you're probably better off simply passing down the menu items and their actions dynamically to a single context menu instance).