nested props are marked as missing when changing route and using keep-alive

[Terrijoo]

Version

3.0.1

Reproduction link

https://jsfiddle.net/Terrijoo/pntLxf20/

Steps to reproduce

1. open console
2. click /home
3. click Info
4. click /foo
5. look into console

What is expected?

The props still being "there" and no warning about the missing required prop.

What is actually happening?

The props are apparently removed/emptied and vue throws a warning.

---

It's a combination of several circumstances:

1. router-view needs to be wrapped by keep-alive
2. props needs to be required on the component
3. prop needs to be on the children, it does work on the parent:

• click /home
• click /foo
• no error/warning

[posva]

The warning shouldn't be appearing, indeed

[defusioner]

Would like to add that in a real project if a component is binded on that props (apollo, computed prop rendering), this makes a huge impact to the page, ex.: one route for an animal description, species is passed by the param.

Temporary solution is to exclude the targeted component from keep-alive (if keep-alive is defined at the framework/application level), but this breaks the whole interest of caching.

[vmihailenco]

In my case I am also watching on the property to make a HTTP request and as a result I get a lot of undefined vars along with the warning... So it is not just the annoying warning - it is worse...

[vmihailenco]

I wonder what are recommendations here. Is this bug going to be fixed this year / eventually? Or the whole thing about <keep-alive> is fundamentally flawed and we should not use it? What are the alternatives? Cache data in the $store and avoid keep-alive? Any help is appreciated.

[Terrijoo]

Is there any way to prevent this? Any kind of workaround? It's been over half a year and the messages are quite "spamming" the console if you're having a lot of views and properties, also resulting in erroneous views because of the "empty" properties.

[tafelnl]

I am also experiencing this problem. Apart from the fact that it is annoying to see all kind of errors in the console, it can actually cause problems. For example, I have a computed property based on one of the $route.params variables. If I then make a watcher on that computed property, it will actually execute the code within that watcher's handler (because it changed from some value to undefined). Of course this can be worked around by adding a check to see if the variable is undefined, but I don't think that should be necessary. Besides that it can cause problems when you use that computed property in a Vue plugin that does not check for undefined for example.

I am not a pro when it comes to the core code of Vue, but maybe it is an idea to sort of 'fix' the $route param to each view, if you know what I mean. So that when you navigate away, the $route property will actually remain the same. I have no idea on how to actually establish it, but I thought to just throw it in here.