Uncaught TypeError: Cannot read properties of undefined (reading 'extend') after upgrade vue to 3.x

Today I upgrade my google chrome extension vue version to 3.x, when run the app, the google chrome extension popup console shows error like this:

commons1.js:13392 Uncaught TypeError: Cannot read properties of undefined (reading 'extend')
    at Object../src/public/widget/index.js (commons1.js:13392)
    at __webpack_require__ (popup.js:23)
    at Object../src/popup/st.js (commons1.js:12725)
    at __webpack_require__ (popup.js:23)
    at Object../src/popup/app.js (commons1.js:12543)
    at __webpack_require__ (popup.js:23)
    at Object../src/popup/index.js (commons1.js:12687)
    at __webpack_require__ (popup.js:23)
    at popup.js:163
    at Function.__webpack_require__.O (popup.js:57)

I am searching from internet that knows that seems vue 3 did not support using extend to load third party component. what should I do to fix this problem? Is it possible using the vue 3 code to do the same thing as vue 2? how to tweak my vue 2 code? This is the vue 2 code with extend looks like:

export default Vue.extend( {
  template ,
  data : ()=>({})
})

In vue 3 there's no exported member called Vue, the right code that's equivalent for Vue.extend is :

import { defineComponent } from 'vue';

export default defineComponent({
  template ,
  data : ()=>({})
})