title: i have vue js component which i have those two function i want to pass them into my vue component how can i do this
body: <p>this is my first function which i use to generate colors</p>
  
  <pre><code>&lt;script&gt;
    shadeColor(color, percent) {
  
      var R = parseInt(color.substring(1,3),16);
      var G = parseInt(color.substring(3,5),16);
      var B = parseInt(color.substring(5,7),16);
  
      R = parseInt(R * (100 + percent) / 100);
      G = parseInt(G * (100 + percent) / 100);
      B = parseInt(B * (100 + percent) / 100);
  
      R = (R&lt;255)?R:255;  
      G = (G&lt;255)?G:255;  
      B = (B&lt;255)?B:255;  
  
      var RR = ((R.toString(16).length==1)?"0"+R.toString(16):R.toString(16));
      var GG = ((G.toString(16).length==1)?"0"+G.toString(16):G.toString(16));
      var BB = ((B.toString(16).length==1)?"0"+B.toString(16):B.toString(16));
  
      return "#"+RR+GG+BB;
  },
  &lt;/script&gt;
  </code></pre>
  
  <p>and my second function :</p>
  
  <pre><code>&lt;script&gt;
   function flatten(data,color_var,order) 
  {
      data.forEach(function (element)
      {
          order++;
          element.category_order = order;
          if(element.children.length &gt; 0) 
          {
  
              element.color = shadeColor(color_var,-4);
              flatten(element.children,element.color,0);
  
          } 
          element.color = shadeColor(color_var,-4);
      });
      return data;
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>which i want to put this two function inside my vue component 
  and i don't know how to do it
  and this is my vue js code:</p>
  
  <pre><code>&lt;v-card flat&gt;
      &lt;draggable
      class="draggable"
      tag="div"
      :="dragOptions"
      @input="emitter"
      :move="checkMove"
      :list="list"
      :value="value"
      @update="saveUpdatedOrder"
      &gt;
        &lt;div class="item-group text-right" :key="el.id" v-for="el in realValue"  :style=" 
      {backgroundColor: el.color}" @click="loop"&gt;
    &lt;div class="item"&gt;{{ el.title }}&lt;/div&gt;
    &lt;nested-test class="item-sub" :list="el.children" /&gt;
   &lt;/div&gt;
      &lt;/draggable&gt;
      &lt;/v-card&gt;
  </code></pre>
  
  <p>i am using vue draggable library
  i want to use them inside this list of elements and children Can anyone help me with this ?? </p>