title: vue3: how to add a globalProperties which is base on $attr
body: <p>In vue3, I try to add attributes like <code>$attrsWithoutIdClassStyle</code> and <code>$attrsIdClassStyleOnly</code> to the <a href="https://vuejs.org/api/application.html#app-config-globalproperties" rel="nofollow noreferrer"><code>globalProperties</code></a> which the values are based on the <code>$attrs</code> of current vue-component</p>
  <p>It can be achieved by the <a href="https://vuejs.org/api/application.html#app-mixin" rel="nofollow noreferrer">global <code>mixins</code></a></p>
  <pre class="lang-js prettyprint-override"><code>import _ from 'lodash';
  import { createApp } from 'vue';
  import App from '~/App.vue';
  
  createApp(App)
      mixin({
          computed: {
              $attrsWithoutIdClassStyle() {
                  return _.omit(this.$attrs, ['id', 'class', 'style']);
              },
              $attrsIdClassStyleOnly() {
                  return _.pick(this.$attrs, ['id', 'class', 'style']);
              },
          }
      })
  </code></pre>
  <p>But since the <a href="https://vuejs.org/api/application.html#app-mixin" rel="nofollow noreferrer"><code>mixin</code> is not recommended in vue3 any more</a>, also the code is ugly.</p>
  <p>So, how can I add the custom attributes to the global properties via <a href="https://vuejs.org/api/application.html#app-config-globalproperties" rel="nofollow noreferrer"><code>app-config-globalproperties</code></a> which is a dynamic value based on the current vm?</p>