title: VUE2js: How to have component re-render after its props change?
body: <p>a Vue newbie here. The thing is is simple:</p>
  
  <pre><code>&lt;template&gt;
   &lt;btn :color="color" @click="toggleColor"&gt;{{btnmsg}}&lt;/btn&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { Btn } from 'chico'
  export default = {
   name: 'AButton',
   componenents: {
    Btn
   },
   data () {
    return {
     btnmsg: 'Legia pany'
     colors: ['blue', 'black', 'green', 'organge', 'teal', 'cyan', 'yellow', 'white'],
     color: 'red'
    }
  },
  methods: {
   toggleColor () {
    this.color = this.colors[Math.floor(Math.random() * Math.floor(this.colors.length))]
   }
  }
   &lt;/script&gt;
  </code></pre>
  
  <p>The 'Btn' from the ChicoFamily goes something like this</p>
  
  <pre><code>  &lt;template&gt;
     &lt;button :is="tag" :class="[className, {'active': active}]" :type="type" :role="role" "&gt;
      &lt;slot&gt;&lt;/slot&gt;
     &lt;/button&gt;
    &lt;/template&gt;
  
  &lt;script&gt;
  import classNames from 'classnames';
   export default {
    props: {
     tag: {
      type: String,
      default: "button"
     },
     color: {
      type: String,
      default: "default"
  ...it takes hellotta props... 
  },
  data () {
   return {
    className: classNames(
      this.floating ? 'btn-floating' : 'btn',
      this.outline ? 'btn-outline-' + this.outline : this.flat ? 'btn-flat' : this.transparent ? '' : 'btn-' + this.color,
  ...classes derived from these props...
     )
    };
   }
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>Yes, it is a button that, when clicked, should change its color. Clicking it indeed changes a prop passed, but does not, in fact, have the button re-rendered. I am asking this question, because I feel like there is something bigger about Vue2 mechanics that is eluding me.</p>
  
  <p>Why passing a different prop does not re-render this sweet-baby-to-be button? <strong>How does one do it properly?</strong></p>
  
  <p>Best, Paco</p>
  
  <p>[edit:] The Btn takes its color from Bootstrap classes deriving from the prop. Can it be that it gets the proper props in, but the className mechanic does not catch up?</p>