Context

(Still learning Vue.js. Newbie question ahead. ☻ )

I have a custom Component. Currently, it does little besides load up some width and height dimensions, along with some text and IDs.

I want to make my custom Component draggable, so I’ve been trying to use vue-drag-resize as a base Component.

I’m having some trouble understanding how to do this in Vue.js. I have an extremely basic custom Component, and I just want it to subclass VueDragResize so I can make instances of my Component draggable.

Questions

• What is the difference between Vue.extend( … ) and Vue.component('name', { extends: «Another Component», … })?

• If I need to pass anything to VueDragResize, where do I do that?

  • Default values for props?
  • Returned values in data: function() {…}?
  • Using v-bind directives?

1. The code of basic working version can be found here
2. Show your code. You can post it here or use codesandbox with prepared DEMO which I linked above.