Component Inheritance with vue js
<p>I am trying to build a base <code>DataComponent</code> which will contain the common functionality required for many other components which deal with basic CRUD entities.<br>
So far I have  </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>//main.js
import Vue from 'vue';

new Vue({
  el:'#app',
  components:{
    DataComponent,
    Quotation
  }
});</code></pre>
</div>
</div>
</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>//data-component.js
import Vue from 'vue';

export
default Vue.extend({

      data() {
          return {
            saved: false
          }
        },

        methods: {

          //This method will be used by all inheriting components to alert
          //the user regarding any changes which need to be saved.
          
          alertSave(entity, fields, intFields) {
              var changeCount = 0;
              fields.forEach(function(field) {
                
                var compareWith = this[field];
                
                //Here "this" need to refer to the child instance but it does not
                //how can I achieve?
                
                if ((compareWith || entity[field.camelToSnake()]) &amp;&amp;
                  entity[field.camelToSnake()] !== compareWith) {
                  changeCount++;
                }
              });
              intFields.forEach(function(field) {
                var compareWith = parseInt(this[field]);
                if ((compareWith || entity[field.camelToSnake()]) &amp;&amp;
                  entity[field.camelToSnake()] !== compareWith) {
                  changeCount++;
                }
              });
              vm.saved = changeCount &lt;= 0;
            },
          
            //sanitizeValue method works as intended as it does not have any reference to "this"
          
            sanitizeValue(value) {
              if (value) {
                return String(value).trim();
              } else {
                return null;
              }
            },
          
            //In getDbData method also this needs to refer to the inheriting child instance
            //from where this method is called - how can I achieve it?
          
            getDbData(entity) {
              if (entity) {
                this.dbTextFields.forEach(function(field) {
                  this[field] = entity[field.camelToSnake()];
                });
                this.dbIntFields.forEach(function(field) {
                  this[field] = entity[field.camelToSnake()];
                });
                this.dbObjFields.forEach(function(field) {
                  this[field] = entity[field.camelToSnake()];
                });
                this.dbAppendedFields.forEach(function(field) {
                  this[field] = entity[field.camelToSnake()]
                });
                this.saved = true;

              }
            }
        });</code></pre>
</div>
</div>
</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>//quotation.js

import DataComponent from './data-component';

export default DataComponent.extend({
  
  data(){
    return{
      id:0,
      date:'',
      remarks:'',
      terms:'',
      quote:{},
      dbTextFields:['to', 'org', 'address', 'items', 'description', 'quoted_by'],
      dbIntFields:['quote_ref', 'quantity', 'amount', 'discount', 'total'],
      dbObjFields:['inquiry', 'booking']
    }
  },
  
  methods:{
    setDbData(){
      let entity = this.quote;
      this.getDbData(entity);
      
      //getDbData gives error as "this" in getDbData does not refer to this
      // child component and so this.dbTextFields becomes undefined.
      
    }
  }
  
});</code></pre>
</div>
</div>
</p>

<pre><code>How to achieve method inheritance as I am trying to do? Is it possible in Vue.js?  
</code></pre>

<p><strong>Edit</strong>  </p>

<p>If I change the signature of the method in data-component.js as under, passing the instance of inheriting component ("this") as vm , it works </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>//data-component.js
import Vue from 'vue';

export
default Vue.extend({

      data() {
          return {
            saved: false
          }
        },

        methods: {

          //This method will be used by all inheriting components to alert
          //the user regarding any changes which need to be saved.
          
          alertSave(entity, fields, intFields, vm) {
              var changeCount = 0;
              fields.forEach(function(field) {
                //var compareWith = this[field];
                var compareWith = vm[field];
                
                //Changed "this" to vm (passed as a parameter) 
                //how can I achieve?
                
                if ((compareWith || entity[field.camelToSnake()]) &amp;&amp;
                  entity[field.camelToSnake()] !== compareWith) {
                  changeCount++;
                }
              });
              intFields.forEach(function(field) {
                //var compareWith = parseInt(this[field]);
                var compareWith = parseInt(vm[field]);
                if ((compareWith || entity[field.camelToSnake()]) &amp;&amp;
                  entity[field.camelToSnake()] !== compareWith) {
                  changeCount++;
                }
              });
              vm.saved = changeCount &lt;= 0;
            },
          
            //sanitizeValue method works as intended as it does not have any reference to "this"
          
            sanitizeValue(value) {
              if (value) {
                return String(value).trim();
              } else {
                return null;
              }
            },
          
            //In getDbData method also this needs to refer to the inheriting child instance
            //from where this method is called - how can I achieve it?
          
            getDbData(entity, vm) { //instance as "vm" parameter
            //change all this to vm
              if (entity) {
                vm.dbTextFields.forEach(function(field) {
                  vm[field] = entity[field.camelToSnake()];
                });
                vm.dbIntFields.forEach(function(field) {
                  vm[field] = entity[field.camelToSnake()];
                });
                vm.dbObjFields.forEach(function(field) {
                  vm[field] = entity[field.camelToSnake()];
                });
                vm.dbAppendedFields.forEach(function(field) {
                  vm[field] = entity[field.camelToSnake()]
                });
                vm.saved = true;

              }
            }
        });</code></pre>
</div>
</div>
    </p>

<p>And then in the inheriting component  </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>//quotation.js

import DataComponent from './data-component';

export default DataComponent.extend({
  
  data(){
    return{
      id:0,
      date:'',
      remarks:'',
      terms:'',
      quote:{},
      dbTextFields:['to', 'org', 'address', 'items', 'description', 'quoted_by'],
      dbIntFields:['quote_ref', 'quantity', 'amount', 'discount', 'total'],
      dbObjFields:['inquiry', 'booking']
    }
  },
  
  methods:{
    setDbData(){
      let entity = this.quote;
      this.getDbData(entity, this);
      
      //passing this (instance) as a parameter
      
      
    }
  }
  
});</code></pre>
</div>
</div>
</p>

<p>Passing the instance ("this") to the methods as vm, it works as expected.  </p>

<p>I am not sure if this is the best way to do it. But then it surely is not inheritance.<br>
How to use inheritance to achieve what I am trying to do?</p>