JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<!-- app -->
<div id="app">

  <p>I want something like this, but using components: </p>
  {{replacedStr}}
  <br>
  <hr>
  My Components:</br>
  <opt :options="options[0]"></opt>
  <br>
  <opt :options="options[1]"></opt>
</div>

CSS

.bold {
  font-weight: bold
}

*{
  font-size: 1.1em
}

JavaScript

Vue.component('opt', {
  template: `<label>
  		<span class="bold" v-for="(str,idx) in options">
      	{{str + " / "}}
      </span>
  </label>`,
  props:{options: Array}
})


new Vue({
  el: '#app',
  data: {
    str: "I have ### and you have a ###.",
      options: [
        ['AAA', 'BBB', 'CCC'],
        ['XXX', 'YYY', 'ZZZ']
      ]
  },
  computed:{
  	replacedStr(){
    	let newStr = this.str;
      this.options.forEach(option=>{
      	newStr = newStr.replace('###',this.concatenateOptions(option));
      })
      return newStr;
    }
  },
  methods: {
    concatenateOptions(strArr) {
      let separator = "";
      let strOptions = "";
      strArr.forEach(word => {
        strOptions += separator  + word;
        separator = " / ";
      });
      return strOptions;
    }
  }
})