AWS Cloudfront cache-control settings being ignored for index.html

Question

I have a Vue SPA hosted in a EC2 instance with Cloudfront. I'm trying to prevent "index.html" from being cached but, unless I enter only the root or try to access index.html directly at www.example.com/index.html, my custom "cache-control: plublic,max-age=0,must-revalidate" header is being ignored.

In the first access on a new tab right after I run a invalidation, the browser usually loads a fresh html (despite the path), but often loads an outdated version of index.html (even when it already loaded the updated version just before) and thus causing a lot of Chunk Load Errors (which I try to handle with Javascript but not all are catched).

In Cloudfront Distribution settings, the "Default root object" is set to "index.html". Also I have configured 3 Behaviours, being the first 2 targeting paths "index.html" and then "/", with a cache policy "CachingDisabled" and custom Response headers policy with "cache-control: public,max-age=0,must-revalidate". The last Behaviour is targeted at path "Default (*)", custom cache policy with max/min/default TTL=31536000 and custom Response headers policy with "cache-control: max-age=31536000". All custom settings are set to override the Origin.

Along with the settings in Cloudfront, I also included in the Apache Virtual Host .conf:

<Files "index.html">
  Header set Cache-Control "no-cache,no-store,must-revalidate"
</Files>

Example of cached html response:

Accept-Ranges: bytes
Age: 55048
Cache-Control: max-age=31536000
Content-Encoding: gzip
Content-Length: 975
Content-Type: text/html
Date: Mon, 22 Apr 2024 23:48:46 GMT
Etag: "xxxxxxxxxxxx-gzip"
Last-Modified: Mon, 15 Apr 2024 21:54:39 GMT
Referrer-Policy: strict-origin-when-cross-origin
Server: -
Strict-Transport-Security: max-age=31536000
Vary: Accept-Encoding
Via: 1.1 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.cloudfront.net (CloudFront)
X-Amz-Cf-Id: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxw==
X-Amz-Cf-Pop: xxxxxx
X-Cache: Hit from cloudfront
X-Content-Type-Options: nosniff
X-Frame-Options: SAMEORIGIN
X-Redirected-By: -
X-Xss-Protection: 1

Example non-cached response:

Accept-Ranges: bytes
Cache-Control: public,max-age=0,must-revalidate
Content-Encoding: gzip
Content-Length: 975
Content-Type: text/html
Date: Mon, 22 Apr 2024 23:48:46 GMT
Etag: "xxxxxxxxxxxx-gzip"
Last-Modified: Mon, 15 Apr 2024 21:54:39 GMT
Referrer-Policy: strict-origin-when-cross-origin
Server: -
Vary: Accept-Encoding
Via: 1.1 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.cloudfront.net (CloudFront)
X-Amz-Cf-Id: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxw==
X-Amz-Cf-Pop: xxxxxx
X-Cache: Miss from cloudfront
X-Content-Type-Options: nosniff
X-Frame-Options: SAMEORIGIN
X-Redirected-By: -
X-Xss-Protection: 1

Cache-Control request header is set to "max-age=0"

In the correct settings scenario, should I expect that the browser loads non-cached html every time?

My website have localization so all url have "example.com/en/other-path" or "example.com/pt/other-path". Vue router will redirect root path to "example.com/en/home". I have tested (I have another distribution and instance for testing purposes) a Distribution Behaviour targeting "/en/*" with the non-cache policies and in this case the all html were not being cached, but I'm not sure this is a good way to handle this problem in production.

What else am I missing?