Skip to content

Options API: exposed (computed) property on child component accessed through ref isn't reactive #13168

Closed
@MeesterDev

Description

@MeesterDev

Vue version

3.5.13

Link to minimal reproduction

https://play.vuejs.org/#eNqtVltv0zAU/ivGIGWVSgoavJSWDaYNDYmLGA+bFoSy5LT15tjBl9Kp6n/n2GlTN007NM0vtX3uPt930jn9UJbx1ALt04GBouSpgfeJILgGOZsut/54xjici9Ka9Z1b05eFzIEPEzpCBZ3QTbGCEYpsyWWah7Je6BojEW3uOaDqTZrdjZW0Iu+T52evXiWUHGecZXcoy6TQkkOcw40dH7xA3/o6qnxHv7qk2n0CY0B1SUN8FDN9LqYpZzk5OiLRKOXcxYo27XaqdRIapOzWfL7TcjgcEqwARkwA+iFRfYhInxyEZmE8EjFNWHVyiu5YHTpksdiKvqfCBxJoWD42hwHbxoNb5r70rbTGSNFEhAdNyq3TuLxsk/ZzptMbDnmNnNbeGGWhaR7C6kkyvLp6KMP9OHsoyUFvTbPVftALqIhHnSlWmqUSK0qpDKnZSEZKFiSKe/WN43P0zlk6fZh5fex+arkh83XoPDXpQSe8qQhrrBLNW7c8v/tEWM67m9IFRqv3gSyTBeYDyOSGu7Cr2ylUpiHVl69bOyQZ0hKx3AkCNwowE6bjRm8a2mGqzbSlAGGw2kZq9SO3mLpXGPTqZtEuNRrLGLFxfKulwBHrnbkxVpToR30rDcMyE1qHSSjWJf9+9ncOOkvXaDOB7K7l/lbP3F1CvyvQoKYItlpmUjUGU4lPL77CDPe1EKe25ai9R/gDsAXW5VipfcQhgmkHej7bc49IJsY/9enMgNCrojz2UbN6oIQiLk/2lL5O9zB+4+0SscBX3AB224eqwfEltx1cQ+Yp+GOZgnx9c5xNUjF2uviLlblAJ/5q0859waoYy2tH4L0k3U26UskSYXUdrdLBD9fjKemnVCsl/aioxtAFcMjcc39Jc1QO4PNo/tYjrp28IQXbkvhPHhb4LwCjb8fY6ZgMybOQ+L5r+H3zmszcV5sd1RZgJjLf5nwTHO01+7C+H5hEWw5+fLbMq6crZt9bOkRq7D66WfWuRt7G4ELC/Z6CciRGrh3Gb+PXh3TxD2yg9qY=

Steps to reproduce

  1. Click the red bar, to the right or left of the disabled buttons.
  2. Check the console debug output. The input should be invalid.
    Optional steps:
  3. Select any file for the file input
  4. Repeat steps one and 2 - this time the input should be valid.

What is expected?

The template does not show "undefined" as the value of the exposed method. When the input becomes valid, the value should change and the buttons should no longer be disabled.

What is actually happening?

The template does not update at all.

System Info

I do not know how to run this command on https://play.vuejs.org/.

Any additional comments?

We normally work with the vue-facing-decorator, so my use of the Options API is a bit messy. Sorry.

I used the Options API because that's what (I think) vue-facing-decorator is using.

The actual problem we ran into (in a non-minimal reproduction) used a computed getter for the ref. I've done both in the playground.

PS. https://new-issue.vuejs.org/?repo=vuejs/core doesn't seem to work and creating the issue just links you to https://github.com/vuejs/core/issues/new/choose without any of the data you filled in present (I had to copy-paste everything).

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions