title: How to render line-break ↵ in VueJS?
body: <p>I want to render a line break whenever there's a ↵ in Vue.</p>
  <p>I followed <a href="https://stackoverflow.com/questions/59305027/how-can-i-use-v-html-on-the-vue">How can I use v-html on the vue?</a> but I am unable to follow.</p>
  <p>What I have tried:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app = new Vue({
    el: '#app',
    data() {
      return {
        a: {
          country: "England:↵ - Liverpool↵ - Chelsea↵ - Arsenal↵ - MU↵ - City",
        },
        testObj: "",
      };
    },
    computed: {
      jsonFunc() {
        return (this.testObj = this.a.country.replace(/↵/g, "&lt;br/&gt;"));
      },
    },
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"&gt;&lt;/script&gt;
  &lt;div id="app"&gt;
    &lt;div&gt;
      Vue
      {{ jsonFunc }}
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>