Progress indicator state attribute does not get set correctly when using VueJS

[AlessandroPomponio]

Description

When using VueJS 3, setting the state attribute in HTML only works partially. Copying the example from the documentation:

<cds-progress-indicator>
  <cds-progress-step
    label-text="Label"
    secondary-label-text="Secondary label"
    state="invalid"></cds-progress-step>
  <cds-progress-step
    label-text="Label"
    secondary-label-text="Secondary label"
    state="complete"></cds-progress-step>
  <cds-progress-step
    label-text="Label"
    secondary-label-text="Secondary label"
    state="current"></cds-progress-step>
  <cds-progress-step
    disabled
    label-text="Label"
    secondary-label-text="Secondary label"></cds-progress-step>
  <cds-progress-step
    label-text="Label"
    secondary-label-text="Secondary label"></cds-progress-step>
</cds-progress-indicator>

Produces the following output:

We can see that the progress bar does not get set and neither does the colour blue. The only way for this to work correctly is to query the document and set the attribute in a way similar to:

    document
      .getElementById("identifier-name")
      .setAttribute(
        "state",
        "complete",
      );

This has actually been around since Carbon V1.

Component(s) impacted

Progress Indicator

Browser

Microsoft Edge

Carbon for IBM.com version

v2.10

Severity

Severity 2 = Aspects of design is broken, and impedes users in a significant way, but there is a way to complete their tasks. Affects major functionality, has a workaround.

Application/website

Simulation Toolkit for Scientific Discovery

Package

@carbon/ibmdotcom-web-components

CodeSandbox example

https://stackblitz.com/edit/vitejs-vite-dgtgvc?file=vite.config.js

Steps to reproduce the issue (if applicable)

No response

Release date (if applicable)

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate issues