Vue.js 既製のコンポーネントに初期値を設定したい

Vue.jsにて認証にamplifyのコンポーネントを使用しています。
クエリ文字列からユーザー名の初期値を設定したいので、mounted時に値を設定するコードを実装しましたが、要素の取得ができずにエラーとなってしまいました。

Error in nextTick: "TypeError: Cannot set property 'value' of null"

自作コンポーネントでは無いので、domの参照にて値を設定をさせるしかないと考えています。
要素を参照できない原因、もしくは回避策をご存知でしたらご教示くださいますようお願いいたします。

該当のソースコード

【親コンポーネント】

vue
1<template>
2  <div>
3    <amplify-authenticator :authConfig="authConfig"></amplify-authenticator>
4  </div>
5</template>
6
7<script>
8export default {
9  name: 'Login',
10  mounted () {
11    this.$nextTick(() => {
12      // ビュー全体がレンダリングされた後にのみ実行されるコード
13      console.log(this.$el)
14      const userEl = this.$el.querySelector('input[data-test="username-input"]')
15      userEl.value = this.$route.query.userName
16    })
17  },
18  data () {
19    return {
20      authConfig: {
21        signInConfig: {
22          isSignUpDisplayed: false
23        }
24      }
25    }
26  }
27}
28</script>
29</style>

【コンソール出力したthis.$el】

html
1<div data-v-26084dc2="" class="mt-3 container">
2  <div data-v-26084dc2="" class="row justify-content-center"><img data-v-26084dc2="" id="signinImg" src="img/logo.86fd83bf.png" alt="canary" class=""></div>
3  <div data-v-26084dc2="" class="row justify-content-center">
4    <div data-v-26084dc2="" class="signin">
5      <div data-v-26084dc2="">
6        <div data-test="sign-in-section" class="Form__formSection___3tqxz">
7          <div data-test="sign-in-header-section" class="Section__sectionHeader___13iO4">サインイン</div>
8          <div data-test="sign-in-body-section" class="Section__sectionBody___3DCrX">
9            <div class="Form__formField___2DWhT">
10              <div>
11                <div class="Input__inputLabel___nQolz">ユーザー名 *</div><input placeholder="ユーザー名を入力してください" autofocus="autofocus" data-test="username-input" class="Input__input___2Sh1s"></div>
12              <!---->
13              <!---->
14            </div>
15            <div class="Form__formField___2DWhT">
16              <div class="Input__inputLabel___nQolz">パスワード *</div><input type="password" placeholder="パスワードを入力してください" data-test="sign-in-password-input" class="Input__input___2Sh1s">
17              <div class="Hint__hint___3Hrww"> パスワードをお忘れの方 <a data-test="sign-in-forgot-password-link" class="Anchor__a___3JUCG">パスワードのリセット</a></div>
18            </div>
19          </div>
20          <div data-test="sign-in-footer-section" class="Section__sectionFooter___1QlDn"><span class="Section__sectionFooterPrimaryContent___36Gb1"><button data-test="sign-in-sign-in-button" class="Button__button___1FrBC">サインイン</button></span>
21            <!---->
22          </div>
23          <!---->
24        </div>
25        <!---->
26        <!---->
27        <!---->
28        <!---->
29        <!---->
30        <!---->
31      </div>
32    </div>
33  </div>
34</div>