Vue 2: Input Filtering with v-model.number

Objective

In this lab, you'll create a simple Vue 2 application that features an input field, designed to accept only numerical values. The value entered into this field will be dynamically mirrored in a <p> tag below the input field. The key Vue directive you'll be using to achieve this is v-model.number.

Tasks

Implement v-model.number

Use Vue's v-model.number directive to bind the input field's value to a data property in your Vue component. This ensures that the input will be treated as a number rather than a string.
```

<input type="number" v-model.number="yourDataProperty">
```
In your Vue component's data function, make sure to declare yourDataProperty and initialize it to a default value (like 0).
```
// Example
data() {
    return {
        yourDataProperty: 0
    };
}
```
Mirror the Input

Display the value of yourDataProperty in a <p> tag below the input field. Make sure it updates in real-time as the value of the input field changes.
```

<p>{{ yourDataProperty }}</p>
```

Challenges Information

Challenge 1: Create Input Field

Create an input field with id set to number-only. Ensure that the type attribute is not set to number.

Challenge 2: Create Display Area

Create a paragraph tag with an id of result. This will be used to display the number-only value.

Challenge 3: Handle Mixed Input (123abc)

Ensure that when you type 123abc into the input field with id number-only, the paragraph with id result should display only the number 123.

Challenge 4: Handle Reversed Mixed Input (abc444)

Ensure that when you type abc444 into the input field with id number-only, the paragraph with id result should display only the number 444.