ArcGis Esri Custom Popup - vue.js

Question

I am using Vue.js for my web application. I created a custom html popup element and tried to add it to the UI (on top of the house icon which you can see in the example), but I cannot make it appear on coordinates which are clicked. I know that I can do it with adding to the view UI and setting position to "manual", but I couldn't find any examples of setting the specific coordinates. Thank you in advance for your help.
this.viewt.ui.add(document.getElementsByClassName("popup")[0], {position: "manual"});
example
Template code
<template>
<div class="popup" v-if="openPopUp" ref="popupwindow">
<article class="house-card" id="popup-test">
<div class="img-wrapper">
<img class="post-image"
src="https://www.comitatoaurora.com/wp-content/uploads/2019/11/contemporary-exterior.jpg"/>
<div class="middle">
€{{ Math.round(this.object.Price) }}
</div>
</div>
<div class="article-details" :key="this.object.Address" #mouseover="hover = true"
#mouseleave="hover = false">
<div class="post-category">
<div>
{{
this.object.Address.replace(this.object.Address.substring(this.object.Address.indexOf(','),
this.object.Address.indexOf(',') + 9), ', ')
}}<span
style="margin: 0.3vw"></span>
</div>
</div>
<div class="percentage-circle">
<div class="progress-single">
<v-progress-circular
color="rgba(81, 87, 102, 0.99)"
:size="30"
:width="2"
:value="this.object.Risk"
>{{ this.object.Risk }}
</v-progress-circular>
<div class="progress-text">
<p>Risk</p>
<p>Score</p>
</div>
</div>
<div class="progress-single">
<v-progress-circular
color="rgba(81, 87, 102, 0.99)"
:size="30"
:width="2"
:value="this.object.Gross_rental_yield*10"
>{{
Math.round((this.object.Gross_rental_yield +
Number.EPSILON) * 10) / 10
}}
</v-progress-circular>
<div class="progress-text">
<p>Gross</p>
<p>Yield</p>
</div>
</div>
<div class="progress-single">
<v-progress-circular
color="rgba(81, 87, 102, 0.99)"
:size="30"
:width="2"
:value="this.object.Net_yield*100/5"
>{{ Math.round((this.object.Net_yield + Number.EPSILON) * 10) / 10 }}
</v-progress-circular>
<div class="progress-text">
<p>Net</p>
<p>Yield</p>
</div>
</div>
</div>
<div class="percentage-circle metrics-level">
<div class="bottom-metric"><img height="12vh"
src="../../public/img/year.svg"
alt="year"/><b>{{
this.object.ConstructionYear
}} </b></div>
<div class="headerDivider"></div>
<div class="bottom-metric"><img height="12vh"
src="../../public/img/rent.svg"
alt="rent"/><b>{{ this.object.Estimated_Rent }}€/mo</b>
</div>
<div class="headerDivider"></div>
<div class="bottom-metric" style="margin-left: 0.15vw !important;"><img height="12vh"
src="../../public/img/square.svg"
alt="square"/>
<b>{{ this.object.Sqm }}m<sup>2</sup></b></div>
</div>
<transition name="fadeo">
<div v-if="hover" class="overlay">
<router-link :to="{name:'card', params: { id: this.id }}">
<div class="overlay-text"> View Asset</div>
</router-link>
</div>
</transition>
</div>
</article>
</div>
</template>

Answer 1

There are two ways for popup to open over a selected feature,
automatically, for example when a feature is selected,
manually, using popup open method.
If you opted for 1), you have to set the PopupTemplate for the layer or the graphic. You have a couple of ways to define custom content for the PopupTemplate, like using a funtion or a promise.
ArcGIS API - PopupTemplate content
If you opted for 2), then you need to,
disable the default behavior if the view (auto open to false),
listen for click events,
on every click event manually open the popup (if a feature was selected), with the map point of the click event as location
view.popup.autoOpenEnabled = false; // <- disable view popup auto open
view.on("click", function (event) { // <- listen to view click event
if (event.button === 0) { // <- check that was left button or touch
view.popup.open({ // <- open popup
location: event.mapPoint, // <- use map point of the click event
fetchFeatures: true // <- fetch the selected features (if any)
});
}
});