Component extends another component lost its extended methods after hot reload

Description

Component A is defined in a .vue file, and component B is defined in a .js file that extends A. After changing the <script> section of A, B is reloaded but it lost what is extended (for the example below, test() will be gone).

import Vue from 'vue'
import component from './component'

export default Vue.extend({
  extends: component,
  methods: {
    test () {           // test will be lost!
      alert('test!')
    }
  }
})

What is expected

Component B is correctly reloaded.

Reproduction repo

https://github.com/hjkcai/vue-hot-reload-api-issue

Reproduction steps

Edit changeThis() method or any part of the <script> section in component.vue. The console will show the error after hot reload.

What I have found

I tried to step into vue-hot-reload-api to find out this question. It seems that component A and B share the same entry in the map object, which means they have the same data ID (data-v-xxxxxx). After hot reload, the constructor of B is recreated with the options of A. Maybe that is why component B is reloaded without its own methods?

[mikerockett]

I tried the suggestion(s) above a little while ago, to no avail. Not sure how else to fix the issue with the limited knowledge I have in regards to how the cogs work internally.

Pinging @yyx990803 – I know your focus is currently on a bunch of other things, and I also know that not many others are bringing this issue up, but is there any chance you could take a look at it? Thanks!

[silverprize]

@scq Thank you!! I’ve fixed some problem in your code. record.Ctor is not Array that is Object. Works fine below code. Thanks again.

        var ctor
        if (options._Ctor) {
          var key = Object.keys(options._Ctor)[0]
          if (key) {
            ctor = options._Ctor[key]
          }
        }
        if (!ctor) {
          ctor = this.constructor
        }
        record.Ctor = ctor