Adding class to p tags throws eslint error - vue.js

Question

I am working on a project and integrating Vue within it. There's eslint and vues eslint included with the webpack compiler. When I try to compile the code, I get an error cannot read property 'replace' of undefined. This appears whenever I try to add a <p> tag with any sort of attribute to it. Looking at the code below <p class="name">John Smith</p> will throw the error. If I remove it, the error's gone.
I'm not using replace anywhere within the file, so I'm not sure why eslint would be throwing this error, or how to get past it.
Component file
<template>
<div v-if="committee_id > 0">
<a
href="#"
class="line-btn blue"
><span>Return to the section's committees list</span></a>
<h2>{{ data.title }}</h2>
<div
v-html="data.content"
></div>
<div class="btn-cnt">
<a
href="#"
class="curve-btn blue"
#click.prevent="goBack"
><span>Join the committee</span></a>
</div>
<div class="roster detail-roster">
<h3>Committees Roster</h3>
<div class="row">
<div class="col-xs-6">
<p class="name">John Smith</p>
</div>
</div>
</div>
</div>
</template>
<script>
import {EventBus} from '../event-bus';
import axios from 'axios';
export default {
data() {
return {
classArray: {
name: 'name',
title: 'title',
},
committee_id: 0,
data: [],
api_url: (API.restUrl !== undefined) ? API.restUrl : '',
};
},
created() {
EventBus.$on('committee-post-id', committee_id => {
this.committee_id = committee_id;
this.getCommitteePost();
});
},
methods: {
getCommitteePost: () => {
this.$nextTick(function () {
axios.get(`${this.api_url + this.committee_id}`)
.then(({data}) => {
if (data.message === 'success') {
this.$nextTick(function () {
this.data = data;
});
}
})
.catch(err => {});
});
},
goBack: () => {
}
},
name: 'section-committee'
};
</script>
Eslint
module.exports = {
"root": null,
"globals": {
"wp": true
},
"env": {
"node": true,
"es6": true,
"amd": true,
"browser": true,
"jquery": true
},
'extends': [
'plugin:vue/recommended'
],
"parserOptions": {
"ecmaFeatures": {
"globalReturn": true,
"generators": false,
"objectLiteralDuplicateProperties": false,
"experimentalObjectRestSpread": true
},
"ecmaVersion": 2017,
"sourceType": "module"
},
"plugins": [
"import"
],
"settings": {
"import/core-modules": [],
"import/ignore": [
"node_modules",
"\\.(coffee|scss|css|less|hbs|svg|json)$"
]
},
"rules": {
"no-console": 0
}
}

Answer 1

Unsure still what's going on, but a resolution for the linter was to change the following in my linter file.
'extends': [
'plugin:vue/base'
],