[Vue] Better control on inputs

Is your feature request related to a problem? Please describe.
As is a complex component, we don't have access to the HTML element itself. Sometimes, we want to use a custom directive (ex.: masked input directive) or even a entire custom input component (ex.: from https://github.com/vuejs-tips/vue-the-mask).

There are some instances when we can't use the <f7-input> at all, for instance, when using row and cells in a <f7-list>. In this regard, there's also a bug where required code will not run (because it doesn't exist) for example: to fix the floating label when filling a field after it is rendered.

Describe the solution you'd like
Two solutions:

1. A slot for <f7-input> that replaces the <input>, <textarea>, etc. Perhaps a slot for each component (input[type], textarea, radio, checkbox, select, etc.)
   Example:

<f7-input>
    <input slot="input" type="text" v-mask="foo bar" v-model="something" />
</f7-input>

2. A directive that can be applied to a <input>, <textarea>, etc. that will fix https://github.com/framework7io/framework7/issues/2644:

<f7-list>
    <li class="item-content">
        <div class="item-inner item-cell">
            <div class="item-row">
                <div class="item-cell item-input">
                    <div class="item-title item-floating-label">Zip Code</div>

                    <div class="item-input-wrap">
                        <the-mask type="tel" required v-model="zipCode" mask="#####-###" f7-input />
                    </div>
                </div>

                <div class="item-cell item-input">
                    <div class="item-title item-floating-label">State</div>
                        <div class="item-input-wrap">
                            <input type="text" readonly :value="state" f7-input />
                        </div>
                    </div>
                </div>
            </div>
    </li>

That f7-input directive will inject all the events and handlers to make floating label to work (and whatever stuff f7 does behind the scenes).

The same kind of solution can be used to fix the smart-select (as the initial value must be set by hand)

Describe alternatives you've considered

Additional context
This will help also people who don't like or understand the lack of v-model support in f7 (I guess slots will make it possible).

Start by reviewing the Vue component and the proposed f7-input directive behavior, including floating labels and smart-select initial values. Compare the slot-based and directive-based approaches, then define which input types and existing handlers each must support. Done means custom input components or native inputs can provide masking, v-model behavior, floating labels, and related Framework7 handling.