GA4 Custom dimensions issue

Question

Hi I am having issues with ga4 custom dimensions using tagmanager. I really don't understand what is happening. Data is being pushed using script below but only on the article pages. The article id is specific to that article.

window.dataLayer = window.dataLayer || [];
dataLayer.push({
    'article_id': '35b65338-0c94-4a90-84a0-082ed420eae2',
    'type': 'article',
    'category': 'News',
    'subcat': 'Tourism',
    'pubdate': '2023-05-10-07:55AM'
    });

The problem is the custom dimension is not sync. On the screenshot below it should only show #2 with pvu_article_id = 35b65338-0c94-4a90-84a0-082ed420eae2. I don't know why it's getting (not set) and different article ids.

This goes same if I change the custom dimension to sub category. it also adds the sub category dimension to the homepage but I only have the script on the article pages.

I have enhanced measurement enabled. ga4 custom dimension ga4 is set to scope using user property. On Tag manager it is using a ga4 event tag using user properties. Trigger is all pages page views

Anyone have a clue what is wrong?

I tried different settings on both tag manager and ga4 custom dimension but nothing worked.

I just need the data from the script to be passed as custom dimensions so we can filter the articles in reporting and datastudio. Ex. show all articles that is under subcategory of tourism.