Why is the href="" attribute added via js not readable by the search engine?

Question

JavaScript

I have added a link (rel="canonical" href=' ') to the head of all pages via
pug

let href = window.location.href;
    $('meta[property="og:url"]').attr('content', href);
    $('link[rel="canonical"]').attr('href', href);

In the developer console, you can see that the links are registered. But when I click to view the page code, it remains empty, and services (for example, screaming frog) also see it empty.
Is there a way to skip the paths manually? The option with js is desirable.
Here is the pug code, I removed the extra

head
  meta(charset='UTF-8')
  meta(name='viewport', content='width=device-width, initial-scale=1.0')
  meta(http-equiv='X-UA-Compatible', content='ie=edge')
  meta(name="keywords", content=(keywords ? keywords : ''))
  meta(name="yandex-verification" content="fd5b0d92ffa76839")
  meta(name="description" content=description)
  meta(property="og:description" content=description)
  meta(property="og:title" content=title)
  meta(property="og:type" content="website")
  meta(property="og:locale" content="ru_RU")
  meta(property="og:image" content="https://zaoks.ru/img/for-pic-sprites/%D1%84%D1%80%D0%B5%D0%B7%D0%B5%D1%80%D0%BD%D1%8B%D0%B5%20%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B.jpg")
  meta(property="og:image:width" content="262px")
  meta(property="og:image:height" content="262px")
  meta(property="og:url" content="")
  if noindex
    meta(name="robots" content="noindex, follow")
  title(data-title-for-navigation=(parent ? heading : ''))= title
  link(rel="canonical" href='')

  link(rel='stylesheet', href='/css/libs.min.css')
  link(rel='stylesheet', href='/css/styles.css')
  
  script(async src="https://www.googletagmanager.com/gtag/js?id=UA-162909300-1")
  
  script. 
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'UA-162909300-1');