fix(fab): Set ripple on class changes

BREAKING CHANGES: Removed interactive prop, ripple effect is now default.

components/fab/Fab.vue

@@ -1,7 +1,7 @@
 <template>
   <button
-    class="mdc-fab"
     :class="classes"
+    class="mdc-fab"
     v-on="$listeners">
     <slot />
   </button>
@@ -26,10 +26,6 @@ export default {
     exited: {
       type: Boolean,
       default: false
-    },
-    interactive: {
-      type: Boolean,
-      default: false
     }
   },
   data () {
@@ -47,23 +43,28 @@ export default {
       }
     }
   },
+  watch: {
+    classes () {
+      this.mdcRipple.destroy()
+      this.mdcRipple = MDCRipple.attachTo(this.$el)
+    }
+  },
   mounted () {
     this.updateSlot()
-    this.slotObserver = new MutationObserver( () => this.updateSlot())
+    this.slotObserver = new MutationObserver(() => this.updateSlot())
     this.slotObserver.observe(this.$el, {
       childList: true,
       subtree: true
     })
-
-    if (this.interactive) { this.mdcRipple = MDCRipple.attachTo(this.$el) }
+    this.mdcRipple = MDCRipple.attachTo(this.$el)
   },
   beforeDestroy () {
     this.slotObserver.disconnect()
     if (typeof this.mdcRipple !== 'undefined') {
       this.mdcRipple.destroy()
     }
   },
-  methods:  {
+  methods: {
     updateSlot () {
       if (this.$slots.default) {
         this.$slots.default.map(n => {

components/fab/README.md

@@ -17,7 +17,6 @@
 | mini | Boolean | false | mini fab button |
 | absoluteRight | Boolean | false | whether the fab should be rendered on the bottom right |
 | exited | Boolean | false | animates the fab out of view |
-| interactive | Boolean | false | fab with ripple effect |
 
 Events are mapped to the inner button element.