title: vuejs3 - update computed value from v-model
body: <p>I'm using vue-3</p>
  <p>I am not familiar with vuejs and I am a newbie developer.</p>
  <p><strong>Situation</strong></p>
  <p>To add translations in batch on salesforce I wanted to code a tool.
  I coded a webservice in rust which gets a json and turns it into a zip for salesforce.</p>
  <p>The client provides me with data from a spreadsheet, and I have to format it in json to send it to my webervice.
  I wanted to allow a copy / paste in a cell then split each line with &quot;\ n&quot; that I link to an input in order to edit the entry if necessary.</p>
  <p><strong>Problem</strong></p>
  <p>The input fill well with splited values, but if I change the input, the value in &quot;computed&quot; does not update. <a href="https://i.stack.imgur.com/xyt4G.png" rel="nofollow noreferrer">see image here</a></p>
  <p><strong>Questions</strong></p>
  <p>How can I update my value in my computed array with splited values ?
  V-model update my input from the computed but not the reverse.
  what is the best function to do this?
  I saw that there is reactive but I do not know if this is the right solution.</p>
  <p>Here my code</p>
  <pre><code>&lt;template&gt;
  &lt;div&gt;
      &lt;label for=&quot;fr&quot;&gt;fr&lt;/label&gt;
      &lt;input type=&quot;checkbox&quot; value=&quot;fr&quot; id=&quot;fr&quot; v-model=&quot;fr.state&quot; /&gt;
  
      &lt;label for=&quot;en&quot;&gt;en&lt;/label&gt;
      &lt;input type=&quot;checkbox&quot; value=&quot;en&quot; id=&quot;en&quot; v-model=&quot;en.state&quot; /&gt;
  
      &lt;label for=&quot;it&quot;&gt;it&lt;/label&gt;
      &lt;input type=&quot;checkbox&quot; value=&quot;it&quot; id=&quot;it&quot; v-model=&quot;it.state&quot; /&gt;
  
      &lt;label for=&quot;es&quot;&gt;es&lt;/label&gt;
      &lt;input type=&quot;checkbox&quot; value=&quot;es&quot; id=&quot;es&quot; v-model=&quot;es.state&quot; /&gt;
  
      &lt;label for=&quot;german&quot;&gt;german&lt;/label&gt;
      &lt;input type=&quot;checkbox&quot; value=&quot;german&quot; id=&quot;german&quot; v-model=&quot;german.state&quot; /&gt;
  &lt;/div&gt;
  
  {{ formated.fr }}
  
  &lt;div class=&quot;Array&quot;&gt;
      &lt;table&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;The table header&lt;/th&gt;
                  &lt;th&gt;default Value&lt;/th&gt;
                  &lt;th v-if=&quot;fr.state === true&quot;&gt;fr&lt;/th&gt;
                  &lt;th v-if=&quot;en.state === true&quot;&gt;en&lt;/th&gt;
                  &lt;th v-if=&quot;it.state === true&quot;&gt;it&lt;/th&gt;
                  &lt;th v-if=&quot;es.state === true&quot;&gt;es&lt;/th&gt;
                  &lt;th v-if=&quot;german.state === true&quot;&gt;german&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;td&gt;C/C&lt;/td&gt;
                  &lt;td&gt;&lt;textarea v-model=&quot;defaultentry&quot; cols=&quot;40&quot; /&gt;&lt;/td&gt;
                  &lt;td v-if=&quot;fr.state === true&quot;&gt;&lt;textarea v-model=&quot;fr.value&quot; cols=&quot;40&quot; /&gt;&lt;/td&gt;
                  &lt;td v-if=&quot;en.state === true&quot;&gt;&lt;textarea v-model=&quot;en.value&quot; cols=&quot;40&quot; /&gt;&lt;/td&gt;
                  &lt;td v-if=&quot;it.state === true&quot;&gt;&lt;textarea v-model=&quot;it.value&quot; cols=&quot;40&quot; /&gt;&lt;/td&gt;
                  &lt;td v-if=&quot;es.state === true&quot;&gt;&lt;textarea v-model=&quot;es.value&quot; cols=&quot;40&quot; /&gt;&lt;/td&gt;
                  &lt;td v-if=&quot;german.state === true&quot;&gt;
                      &lt;textarea v-model=&quot;german.value&quot; cols=&quot;40&quot; /&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr v-for=&quot;(entry, index) in formated.default&quot; :key=&quot;index&quot;&gt;
                  &lt;td v-if=&quot;formated.default[index]&quot;&gt;{{ index }}&lt;/td&gt;
                  &lt;td v-if=&quot;formated.default[index]&quot;&gt;
                      &lt;input type=&quot;text&quot; v-model=&quot;formated.default[index]&quot; /&gt;
                  &lt;/td&gt;
                  &lt;td v-if=&quot;formated.fr&quot;&gt;
                      &lt;input type=&quot;text&quot; v-model=&quot;formated.fr[index]&quot; /&gt;
                  &lt;/td&gt;
                  &lt;td v-if=&quot;formated.en&quot;&gt;
                      &lt;input type=&quot;text&quot; v-model=&quot;formated.en[index]&quot; /&gt;
                  &lt;/td&gt;
                  &lt;td v-if=&quot;formated.it&quot;&gt;
                      &lt;input type=&quot;text&quot; v-model=&quot;formated.it[index]&quot; /&gt;
                  &lt;/td&gt;
                  &lt;td v-if=&quot;formated.es&quot;&gt;
                      &lt;input type=&quot;text&quot; v-model=&quot;formated.es[index]&quot; /&gt;
                  &lt;/td&gt;
                  &lt;td v-if=&quot;formated.german&quot;&gt;
                      &lt;input type=&quot;text&quot; v-model=&quot;formated.german[index]&quot; /&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre><code>&lt;script&gt;
  export default {
  name: &quot;Array&quot;,
  entries: {},
  
  data() {
      return {
          defaultentry: [],
          fr: { state: false, value: [] },
          en: { state: false, value: [] },
          it: { state: false, value: [] },
          es: { state: false, value: [] },
          german: { state: false, value: [] },
      };
  },
  
  computed: {
      formated: function() {
          let entries = {};
  
          let base = this.defaultentry
              .toString()
              .split(&quot;\n&quot;)
              .map((x) =&gt; {
                  if (x.length &gt; 40) {
                      return &quot;error&quot;;
                  }
                  return x.trim();
              });
          let fr = this.fr.value
              .toString()
              .split(&quot;\n&quot;)
              .map((x) =&gt; {
                  if (x.length &gt; 40) {
                      return &quot;error&quot;;
                  }
                  return x.trim();
              });
          let en = this.en.value
              .toString()
              .split(&quot;\n&quot;)
              .map((x) =&gt; {
                  if (x.length &gt; 40) {
                      return &quot;error&quot;;
                  }
                  return x.trim();
              });
          let it = this.it.value
              .toString()
              .split(&quot;\n&quot;)
              .map((x) =&gt; {
                  if (x.length &gt; 40) {
                      return &quot;error&quot;;
                  }
                  return x.trim();
              });
          let es = this.es.value
              .toString()
              .split(&quot;\n&quot;)
              .map((x) =&gt; {
                  if (x.length &gt; 40) {
                      return &quot;error&quot;;
                  }
                  return x.trim();
              });
          let german = this.german.value
              .toString()
              .split(&quot;\n&quot;)
              .map((x) =&gt; {
                  if (x.length &gt; 40) {
                      return &quot;error&quot;;
                  }
                  return x.trim();
              });
  
          entries.default = base;
          if (this.fr.state == true) {
              entries.fr = fr;
          } else {
              delete entries.fr;
          }
          if (this.en.state == true) {
              entries.en = en;
          } else {
              delete entries.en;
          }
          if (this.it.state == true) {
              entries.it = it;
          } else {
              delete entries.it;
          }
          if (this.es.state == true) {
              entries.es = es;
          } else {
              delete entries.es;
          }
          if (this.german.state == true) {
              entries.german = german;
          } else {
              delete entries.german;
          }
  
          return entries;
      },
  },
  };
  &lt;/script&gt;
  </code></pre>
  <p>Thank you for your time and help</p>