title: how to remove deprecated $listeners in vue 3
body: <p>In migration from vue 2 to vue 3, i am getting some compilation warnings. Deprecation of $listeners in components is one of those warnings. I have checked official documentation to use $attrs by removing $listeners. I am new in vue 3. So, not able to understand how to handle those warnings related to listeners.</p>
  <p>Here is the snippet:
  <strong>1st case:</strong>
  <strong>Component 1</strong></p>
  <pre><code>    &lt;template&gt;
      &lt;div&gt;
          &lt;input ref=&quot;input&quot;
                 :value=&quot;txtField&quot;
                 @input=&quot;txtField=$event.target.value&quot;
                 :type=&quot;inputType&quot;
                 :class=&quot;inputClass&quot;
                 :placeholder=&quot;placeholder&quot;
                 :disabled=&quot;disabled&quot;
                 :readonly=&quot;readonly&quot;
                 :onfocus=&quot;disabled&amp;&amp;'this.blur();'&quot;
                 :tabindex=&quot;tabindex&quot;
                 v-on=&quot;listenersInput&quot; // here is the method where $listeners used
                 @keyup.enter=&quot;enterHandler&quot;
                 @blur=&quot;validateOnEvent&quot;/&gt;
       &lt;/div&gt;
  &lt;/template&gt;
  
  //method 
  
  listenersInput() {
              //var vm = this;
              return Object.assign({}, this.$listeners, {
                  input: function(event){ /*vm.$emit('input',event.target.value);*/}
              });
          },
  </code></pre>
  <p><strong>2nd case:</strong>
  <strong>Component 2</strong></p>
  <pre><code>    &lt;template&gt;
      &lt;custom-button v-bind=&quot;buttonProps&quot;
                   v-on=&quot;$listeners&quot;
                   :class=&quot;buttonClass&quot;
                   @click=&quot;tooggle&quot;&gt;&lt;/custom-button&gt;
  &lt;/template&gt;
  </code></pre>
  <p>How to handle these two cases?</p>