Proper way to override properties and methods in Vue.js?
<p>What is the proper way to override methods using <a href="https://v2.vuejs.org/v2/guide/mixins.html" rel="nofollow noreferrer">mixins</a> in Vue.js?  I know that you're able to mock inheritance using mixins, but let's say that you want to extend some props but not completely override the entire prop value.</p>
<p>For instance I have a baseCell, but I also need to have components that will be similar but function differently for <code>&lt;td&gt;</code>s and <code>&lt;th&gt;</code>s, so I create two additional components that use the baseCell as the mixin.</p>
<pre><code>var baseCell = {
  ...
  props: {
    ...
    initWrapper: {
      type: String,
      default: 'td'
    },
    ...
  },
  methods: {..}
};
</code></pre>
<p>In the components setting the props as such will completely override all the values.</p>
<pre><code>Vue.component('tableHeader', {
  mixins: [baseCell],
  props: {
    initWrapper: {
      default: 'th'
    }
  }
}
</code></pre>
<p>I've come up with a solution of merging the properties but it seems sort of hacky, and I'm not sure if there is a better solution.</p>
<pre><code>Vue.component('tableHeader', {
  mixins: [baseCell],
  props: Object.assign({}, baseCell.props, {
    initWrapper: {
      default: 'th'
    }
  })
});
</code></pre>
<p>With this, I retain the baseCell props, but some defined ones in the object passed.</p>