fix

 <template>
-  <AuthComponent :auth="isAuth" class="icon-btn" @click="onClick" :style="btnStyle">
+  <AuthComponent :auth="isAuth" class="icon-btn" :class="{'btn-selected': viewOption.selected}" @click="onClick" :style="btnStyle">
     <i class="iconfont" :class="iconClass" :style="iconStyle"></i>
     <p v-if="viewText" class="icon-btn-text" :style="textStyle">
       <span class="view-text">{{Number(viewText) ? viewText : ''}}</span>
@@ -75,7 +75,6 @@ export default {
     return {
       currentClass: {},
       viewOption: {},
-      btnSelected: false,
       actionClass: '',
       editText: null
     };
@@ -102,7 +101,7 @@ export default {
     btnStyle() {
       let color = this.viewOption.color || defaultOption.color;
 
-      return `color: ${this.btnSelected ? (this.viewOption.selectedColor || color) : color};`;
+      return `color: ${this.viewOption.selected ? (this.viewOption.selectedColor || color) : color};`;
     },
     iconClass() {
       if (this.actionClass) {
@@ -150,12 +149,12 @@ export default {
     type() {
       this.setCurrentClass();
     },
-    option(val) {
-      if (this.viewOption.selected !== this.option.selected) {
+    option(val, oldVal) {
+      if (oldVal.selected !== val.selected) {
         this.actionClass = '';
       }
 
-      if (this.viewOption.iconBold !== this.option.iconBold) {
+      if (oldVal.iconBold !== val.iconBold) {
         this.setCurrentClass();
       }
 
@@ -182,6 +181,7 @@ export default {
       forEach(defaultOption, (value, key) => {
         this.viewOption[key] = this.option.hasOwnProperty(key) ? this.option[key] : defaultOption[key];
       });
+
       this.viewOption = {...this.viewOption};
     },
     setCurrentClass() {
@@ -197,15 +197,15 @@ export default {
       this.currentClass = currentClass;
     },
     changeBtnStatus() {
-      this.btnSelected = !this.btnSelected;
+      this.viewOption.selected = !this.viewOption.selected;
 
       if (this.viewOption.textAutoChange) {
         if (!isNaN(Number(this.viewText))) {
-          this.editText = Number(this.viewText) + (this.btnSelected ? 1 : -1);
+          this.editText = Number(this.viewText) + (this.viewOption.selected ? 1 : -1);
         }
       }
 
-      this.actionClass = this.btnSelected ? currentClass.selected : currentClass.default;
+      this.actionClass = this.viewOption.selected ? this.currentClass.selected : this.currentClass.default;
     },
     syncService(type, data) {
       if (typeof this[type] === 'function') {
@@ -248,7 +248,7 @@ export default {
           this.syncService(this.syncFnName, {
             articleId: this.articleId,
             commentId: this.commentId,
-            status: this.btnSelected
+            status: this.viewOption.selected
           }).then(backFn).catch(backFn);
         }
       }

@@ -133,6 +133,10 @@ export default {
 
     .fav {
       line-height: 60px;
+
+      .btn-selected > .icon-btn-text {
+        color: #d90025!important;
+      }
     }
   }