Vue

HTML

<div id="app">
  <h2>Foo proof of concept:</h2>

  <foo-component></foo-component>
  <foo-component-specialised></foo-component-specialised>
</div>

Vue

var FooComponent = {
  template: '<button @click="fooMethod()" v-text="buttonLabel"></button>',

  data: function () {
   return {
     foo: 1,
     bar: 'lorem',
     buttonLabel: 'Click me',
   }
  },
  
  methods: {
    fooMethod: function () {
      alert('called from FooComponent');
    },
    
    barMethod: function () {
      alert('called from FooComponent');
    },
  }
}

var FooComponentSpecialised = {
  extends: FooComponent,

  data: function () {
   return {
     buttonLabel: 'Specialised click me',
     zar: 'ipsum',
   }
  },
  
  methods: {
    fooMethod: function () {
      FooComponent.methods.fooMethod.call(this);
    
      alert('called from FooComponentSpecialised');
    },
  }
}

new Vue({
  el: "#app",

  components: {
    FooComponent: FooComponent,
		FooComponentSpecialised: FooComponentSpecialised
  }
})