title: How to pass Tiptap-vuetify HTML source code from one component to the other?
body: <p>I'm using <strong>Tipap</strong> text editor in my <strong>Nuxt project</strong>.
  I can pass the initial content (in <code>components/blogs/Editor.vue</code>) to another component (in <code>pages/blogs/editor.vue</code>), however when the data is updated, the initial content that is being passed won't update. It keeps getting the same data.</p>
  <p>Here is my code:</p>
  <p>in <code>components/blogs/Editor.vue</code>
  <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>&lt;script&gt;
  // import the component and the necessary extensions
  import {
    TiptapVuetify,
    Heading,
    Bold,
    Italic,
    Strike,
    Underline,
    Code,
    Paragraph,
    BulletList,
    OrderedList,
    ListItem,
    Link,
    Blockquote,
    HardBreak,
    HorizontalRule,
    History
  } from "tiptap-vuetify";
  export default {
    // specify TiptapVuetify component in "components"
    components: { TiptapVuetify },
    data() {
      return {
        localHTML: "",
        localJSON: "",
        post_content:'',
        // declare extensions you want to use
        extensions: [
          History,
          Blockquote,
          Link,
          Underline,
          Strike,
          Italic,
          ListItem,
          BulletList,
          OrderedList,
          [
            Heading,
            {
              options: {
                levels: [1, 2, 3]
              }
            }
          ],
          Bold,
          Link,
          Code,
          HorizontalRule,
          Paragraph,
          HardBreak
        ],
        // starting editor's content
        content: `
        &lt;h1&gt;Yay Headlines!&lt;/h1&gt;
        &lt;p&gt;All these fwer &lt;strong&gt;cool tags&lt;/strong&gt; are working now.&lt;/p&gt;
      `
      };
    },
    mounted() {
      this.$emit("content", this.content);
    }
  };
  &lt;/script&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div&gt;
      &lt;ClientOnly&gt;
        &lt;!-- Use the component in the right place of the template --&gt;
        &lt;tiptap-vuetify
          v-model="content"
          :extensions="extensions"
          :toolbar-attributes="{ color: 'black', dark: true }"
        /&gt;
        &lt;div class="export"&gt;
          &lt;h3&gt;HTML&lt;/h3&gt;
          &lt;pre&gt;&lt;code&gt;{{ content }}&lt;/code&gt;&lt;/pre&gt;
          &lt;h2&gt;post&lt;/h2&gt;
          &lt;!-- &lt;p&gt;{{post_content}}&lt;/p&gt; --&gt;
          &lt;!-- &lt;p&gt;{{localHTML}}&lt;/p&gt; --&gt;
          &lt;v-divider /&gt;
        &lt;/div&gt;
        &lt;template #placeholder&gt;
          Loading...
        &lt;/template&gt;
      &lt;/ClientOnly&gt;
    &lt;/div&gt;
  &lt;/template&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>in <code>pages/blogs/editor.vue</code></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>&lt;script&gt;
  import Editor from "../../components/blogs/Editor.vue";
  import axios from "axios";
  export default {
    data() {
      return {
        post_title: "",
        short_description: "",
        content_image_url: "",
        content: "",
        post_content: ""
      };
    },
    methods: {
      getContent(e) {
        this.content = e;
        this.post_content=content;
      },
      submitForm() {
        let data = {
          post_title: this.post_title,
          short_description: this.short_description,
          content_image_url: this.content_image_url,
          post_content:this.content
        };
        axios
          .post("http://localhost:8000/api/posts/add", data, {
            headers: {
              Accept: "application/json"
            }
          })
          .then(res =&gt; {
            console.log(res);
          })
          .catch(err =&gt; console.log(err));
      }
    },
    components: {
      Editor
    }
  };
  &lt;/script&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;v-app&gt;
      &lt;v-container&gt;
        &lt;section&gt;
          &lt;h1 class="display-1"&gt;
            Tiptap Vuetify
          &lt;/h1&gt;
          &lt;Editor v-on:content="getContent($event)" /&gt;
          &lt;h2&gt;getContent&lt;/h2&gt;
          &lt;p&gt;{{ content }}&lt;/p&gt;
          &lt;v-layout justify-center&gt;
            &lt;v-btn to="/blogs" outlined color="info"&gt;Back&lt;/v-btn&gt;
            &lt;v-divider /&gt;
            &lt;v-btn color="info" form="post-form" type="submit"&gt;Publish&lt;/v-btn&gt;
          &lt;/v-layout&gt;
        &lt;/section&gt;
      &lt;/v-container&gt;
    &lt;/v-app&gt;
  &lt;/template&gt;</code></pre>
  </div>
  </div>
  <a href="https://i.stack.imgur.com/vzEjB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vzEjB.png" alt="initial data" /></a></p>
  <p><a href="https://i.stack.imgur.com/MpgXP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MpgXP.png" alt="getContent doesn't get new data" /></a></p>