title: Overlapping Vue components
body: <p>I've got a string like this:</p>
  
  <pre><code>"Hello World! It's me, Chelsea."
  </code></pre>
  
  <p>And a list of strings.</p>
  
  <pre><code>["Hello", "World", "Chelsea"]
  </code></pre>
  
  <p>I'd like to dynamically wrap the matching strings in Vue components. Individually, it looks like this:</p>
  
  <pre><code>&lt;MyComponent :text="Hello"/&gt; &lt;MyComponent :text="World"/&gt;! It's me, &lt;MyComponent :text="Chelsea"/&gt;.
  </code></pre>
  
  <p>The solution for this could be something like the following (thanks <strong>Ulysse BN</strong>):</p>
  
  <pre><code>&lt;template v-for="s in string.split(/\b/)"&gt;
    &lt;MyComponent v-if="list.includes(s)" :string="s"/&gt;
    &lt;span v-else&gt;{{ s }}&lt;/span&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>But we run into problems where we have multi-word strings in our list (e.g. "It's me") and more specifically, overlapping words. If we added to the list of strings "Hello World", here's what the ideal result looks like:</p>
  
  <pre><code>&lt;MyComponent :text="Hello World"&gt; 
    &lt;MyComponent :text="Hello"/&gt; 
    &lt;MyComponent :text="World"/&gt;!
  &lt;/MyComponent&gt;
  It's me, &lt;MyComponent :text="Chelsea"/&gt;.
  </code></pre>
  
  <p>How can I achieve this functionality? I have a hunch it involves v-for and some kind of recursive function, but how I can't say.</p>