$refs inside of Vue template is undefined

Plugins
#1

I’m attempting to create an Add button on a specific panel blueprint. I would like to reproduce the same functionality as that of the “Add” button on a “pages” section but without adding the list of pages. I’ve created a plugin with the following index.js:

panel.plugin('myplugs/addnew', {
  sections: {
    addnew: {
      template: `
        <k-button icon="add" @click="$refs.create.open()">
          {{ $t("add") }}
        </k-button>
        <k-page-create-dialog ref="create" />`
    }
  }
});

Unfortunately, when I click the newly created button on my panel it returns the message “Cannot read property ‘open’ of undefined”. My understanding of Vue is that by adding the ref attribute to a component it automatically gets added to the $refs object. What am I doing wrong here?