Unable to display a label when using vscode-dropdown with vee-validate Field

[davidkjackson54]

What happened?

I have the following code in my VSCode extension making use of webview.

The first option is what I am trying to get to work. I want to display a label above the drop down listbox but no matter what, I am unable to get this to work. I haev tried various combinations of without any success. The second option is the example provided in VsCode webview and works fine -- when used outside of Field.  

<div class="dropdown-container">
        <Field name="field" as="vscode-dropdown" v-model=packageCreateParms.test>
              <vscode-option value="">--Select Create method--</vscode-option>
              <vscode-option value="Copy Forward">Copy Forward</vscode-option>
              <vscode-option value="Long">Long</vscode-option>
            
        </Field>
        <ErrorMessage name="field" class="error"></ErrorMessage> 
      </div>

      <div class="dropdown-container">
        <label for="label">Choose an option:</label>
        <vscode-dropdown id="label">
          <vscode-option>Option Label A</vscode-option>
          <vscode-option>Option Label B</vscode-option>
          <vscode-option>Option Label C</vscode-option>
        </vscode-dropdown>
      </div>

Reproduction steps

No response

Version

Vue.js 3.x and vee-validate 4.x

What browsers are you seeing the problem on?

• [ ] Firefox
• [ ] Chrome
• [ ] Safari
• [ ] Microsoft Edge

Relevant log output

No error reported.

Demo link

Unable to provide a snippet as it is very specific

Code of Conduct

• [X] I agree to follow this project's Code of Conduct