Strange behaviour with localized `date` fields

[duncanmcclean]

Bug description

When the date field is localized and the value is different between the localizations, the state of the Date fieldtype seems to get out of sync when you switch localizations.

CleanShot.2024-08-22.at.17.55.00.mp4

Possibly related to #3440 & #9147.

How to reproduce

Assuming you've already setup multiple sites & configured a collection with two (or more) sites....

1. Enable "Publish Dates" on the collection
2. Edit the blueprint and make the date field localizable
3. Create an entry in Site A - give it a date.
4. Localize the entry in Site B - give it a different date.
5. Save & refresh the page.
6. On Site A, the date will be correct.
7. Switch to the Site B localization, the date will be Site A's date.
8. Switch back to the Site A localization, the date will be Site B's date.

Logs

No response

Environment

Environment
Application Name: Duncan's Wonderful Sandbox
Laravel Version: 11.19.0
PHP Version: 8.3.10
Composer Version: 2.7.7
Environment: local
Debug Mode: ENABLED
URL: sandbox.test
Maintenance Mode: OFF
Timezone: UTC
Locale: en

Cache
Config: NOT CACHED
Events: NOT CACHED
Routes: NOT CACHED
Views: CACHED

Drivers
Broadcasting: null
Cache: redis
Database: sqlite
Logs: stack / single
Mail: smtp
Queue: redis
Session: file

Statamic
Addons: 0
Sites: 2 (English, German)
Stache Watcher: Enabled
Static Caching: Disabled
Version: cd5e263bce2d6259c1fd17398c7a880099496637 PRO

Installation

Fresh statamic/statamic site via CLI

Additional details

No response

[lostgeek]

We have encountered the same problem in one of our projects and have hot-fixed the Date Popover component:

 resources/js/components/fieldtypes/date/SinglePopover.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/resources/js/components/fieldtypes/date/SinglePopover.vue b/resources/js/components/fieldtypes/date/SinglePopover.vue
index 174c34c7a6..762d7546b4 100644
--- a/resources/js/components/fieldtypes/date/SinglePopover.vue
+++ b/resources/js/components/fieldtypes/date/SinglePopover.vue
@@ -88,6 +88,10 @@ export default {
             this.$nextTick(() => this.updateInputValue());
         },
 
+        'bindings': function () {
+            this.$nextTick(() => this.updateInputValue());
+        },
+
     },
 
     methods: {

The watcher needs to watch the ref and not it's value it seems, though I'm not too well versed in Vue 2 😄