从父vue组件调用Vue Web组件方法是不确定的

Question

我已经发布了一个Vue Web组件，它有一个方法，我想从父Vue组件调用此方法，但是从父组件调用displayDialog（）函数时出现“未定义”错误。我没有将此Web组件用作Vue实例组件属性

// vue web component code

<template>
<div>
  <h4> {{ msg }} </h4>

</div>
</template>

<script>
export default {
  name: 'DocUpload',
  props: ['msg'],
  methods: {
    displayDialog() {
      console.log('I am here');
    },
  },
};
</script>

<style></style>

// parent component vue.js file
<template>
<div>

 <doc-upload ref="doc" msg="attribute says hi!"/>
</div>
</template>
<script>
export default {
  name: 'DocUpload',
  props: ['msg'],
  methods: {
    displayDialog() {
       console.log('parent com');
       this.$refs.doc.displayDialog();  // error in this line 'displayDialog' is undefined
    },
  },
};
</script>

<style></style>

// parent component main.js file

import Vue from 'vue';
import App from './App';

// this is the web component importing in parent component 
import 'doc-upload-ui';
const init = async () => {
  return new Vue({
    render: (h) => <App />, 
  }).$mount('#poc');
};
export default { init };