JSFiddle - React, Tailwind, and code Playground

HTML

<!-- app in app -->
<div class="colorHandler">
<div class="nameHandler">
  <p>[% nameAttr() %]</p>
  <p>[% randomColor() %]</p>
</div>
</div>

<hr> <!-- OR -->

<!-- multiple time the same app -->
<div class="nameHandler">
  <p>[% nameAttr() %]</p>
</div>
<div class="nameHandler">
  <p>[% nameAttr() %]</p>
</div>
<div class="colorHandler">
<p>[% randomColor() %]</p>
</div>
<div class="colorHandler">
<p>[% randomColor() %]</p>
</div>

JavaScript

var colorhandler = new Vue({
  el: '.colorHandler',
  methods:{
  	randomColor:function(){
    	var colors = "['#e6f0ff', '#000a1a' ,'#ffe680', '#ffcc00', '#ffd9b3']";
      var parsed_colors = colors.match(/#[a-f0-9]{6}/g);
      var randomIndex = Math.floor(Math.random() * parsed_colors.length); 
      var randomElement = parsed_colors[randomIndex];
      return randomElement
    }
  },
  delimiters: ["[%","%]"]
});

var name = new Vue({
  el: '.nameHandler', 
  methods:{
  	nameAttr:function(){
    	var nom_prenom = 'John Doe';
      return nom_prenom
    }
  },
  delimiters: ["[%","%]"]
});