In Vue, sl-input valueAsDate can fail unless attribute order of type="date" comes before :valueAsDate

[Scraphead]

Description:

In the sl-input component, if type="date" comes before :valueAsDate in Vue, it works as expected.
If type="date" comes after :valueAsDate, a warning shows up and setting the date fails.

Reproduction Steps:

1. Create a new Vue project using the command npm create vue@latest and select 'No' for all options during setup.
2. Install Shoelace as described in the Vue Framework Guide.
3. Replace the code in App.vue with the following:

<template>
  <!-- Placing type="date" before :valueAsDate works fine  -->
  <sl-input type="date" :valueAsDate="new Date()"></sl-input>

  <!-- Placing type="date" after :valueAsDate throws warning and fails setting the date -->
  <sl-input :valueAsDate="new Date()" type="date" ></sl-input>
</template>

<script setup>
  import '@shoelace-style/shoelace/dist/components/input/input.js';
</script>

Expected Behavior:
Both sl-input components should function identically and set the date value without any warnings.

Actual Behavior:
The second sl-input component triggers the following Vue warning and fails to set the date:

Warning message: Failed setting prop "valueAsDate" on <sl-input>

[Vue warn]: Failed setting prop "valueAsDate" on <sl-input>: value Fri Nov 03 2023 09:46:38 GMT+0100 (Central European Standard Time) is invalid. DOMException: An attempt was made to use an object that is not, or is no longer, usable
    set valueAsDate chunk.VBEAZ2MR.js:83
    patchDOMProp runtime-dom.esm-bundler.js:536
    patchProp runtime-dom.esm-bundler.js:630
    mountElement runtime-core.esm-bundler.js:5257
    processElement runtime-core.esm-bundler.js:5204
    patch runtime-core.esm-bundler.js:5076
    mountChildren runtime-core.esm-bundler.js:5332
    processFragment runtime-core.esm-bundler.js:5547
    patch runtime-core.esm-bundler.js:5062
    componentUpdateFn runtime-core.esm-bundler.js:5756
    run reactivity.esm-bundler.js:178
    update runtime-core.esm-bundler.js:5862
    setupRenderEffect runtime-core.esm-bundler.js:5870
    mountComponent runtime-core.esm-bundler.js:5660
    processComponent runtime-core.esm-bundler.js:5613
    patch runtime-core.esm-bundler.js:5088
    render2 runtime-core.esm-bundler.js:6380
    mount runtime-core.esm-bundler.js:3832
    mount runtime-dom.esm-bundler.js:1449
    <anonymous> main.js:6
  at <App>

Environment:

• Vue version: 3.3.4
• Shoelace version: 2.11.2
• Browser: Firefox and Edge

[claviska]

I welcome a PR if anyone wants to fix this, but I think it's time to deprecate these properties in favor of methods that will work more reliably. See shoelace-style/webawesome#103.

[claviska]

We've decided to remove these properties in 3.0 since they can't behave the same way as native inputs. We are considering replacing them with methods such as setValueFromDate() and setValueFromNumber() in Web Awesome.

Closing as a wontfix since these are now deprecated.