Parent-Child property trickling

can't pass size property from parent to child

by NesterOne

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.24.2/css/uikit.min.css">
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>

<div id="app">
  <uk-button type="primary">Primary</uk-button>
  <uk-button type="success">Success</uk-button>
  <uk-button type="primary" size="small">Small Primary</uk-button>
  <uk-button type="success" size="large">Large Success</uk-button>
  <uk-button-primary test="small">Test</uk-button-primary> 
  
</div>

JavaScript

var UkButton = Vue.extend({

  template: "<button class='uk-button {{ typeClass }} {{ sizeClass }}'><slot></slot></button>",

  props: {
    type: String,
    size: String
  },

  computed: {

    typeClass: function() {
      switch (this.type) {
        case "primary":
          return "uk-button-primary";
        case "success":
          return "uk-button-success";
        default:
          return "";
      }
    },
    
    sizeClass: function(){
    	switch(this.size){
      	case "large":
          return "uk-button-large";
        case "small":
          return "uk-button-small";
        default:
          return "";
      }
    }
  }
});

Vue.component("uk-button", UkButton);

Vue.component("uk-button-primary", {

	props: ["test"],

	template: "<uk-button type='primary' size='{{ test }}'><slot><slot></uk-button>"  

});


new Vue({
  el: '#app'
})