title: Vuetify - How to make setSelectionRange(int, int) work in v-textarea when its model is changed
body: <p>I try to use the method <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange" rel="nofollow noreferrer"><code>setSelectionRange</code></a> to change the position of the cursor in a vuetify <a href="https://vuetifyjs.com/en/components/textarea" rel="nofollow noreferrer"><code>v-textarea</code></a>.</p>
  
  <p>It works well when I <strong>do not manipulate</strong> the data element referred by the <code>v-model</code> attribute of the textarea. However, if I attempt to change the body first, and then apply the <code>setSelectionRange</code> method; the cursor moves directly to the end of the text.</p>
  
  <p>I'm attaching a snippet of a simplified version. Once you hit backspace key on anywhere in the textarea and the cursor should <strong>move to index 2</strong>; but it moves to the end of the text instead.</p>
  
  <p>If you remove <code>this.body</code> and backspace again, however, it peacefully moves to index 2.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>new Vue({
    el: '#app',
    data: {
      body: ''
    },
    created () {
      this.body = 'I am initial body. Hit backspace on somewhere if you want!'
    },
    methods: {
      onBackspaceOrDeleteButtonKeydown (event) {
        // disable default behavior
        event.preventDefault()
        
        let bodyTextArea = this.$refs.pourBody.$el.querySelector('textarea')
        
        // COMMENT OUT THE NEXT LINE TO SEE THE CURSOR MOVES TO INDEX 2 ALWAYS
        this.body = 'I am changed body. My cursor should have moved to index 2 anyways, but it goes to the end like &gt;'
        bodyTextArea.setSelectionRange(2, 2)
      }
    }
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet"&gt;
    &lt;link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="app"&gt;
      &lt;v-app&gt;
        &lt;v-content&gt;
          &lt;v-container&gt;
            &lt;v-textarea 
              ref="pourBody"
              outline
              v-model="body"
              auto-grow rows="7"
              @keydown.delete="onBackspaceOrDeleteButtonKeydown"
            &gt;&lt;/v-textarea&gt;
  
          &lt;/v-container&gt;
        &lt;/v-content&gt;
      &lt;/v-app&gt;
    &lt;/div&gt;
  
    &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The <code>setSelectionRange</code> does not like body change apparently.</p>
  
  <p>How can I work around it?</p>