`_http.get().pipe(publishReplay(), refCount())` behavior differs - if returned from a getterMethod() and - if declared as a property$

Question

I created a mini app which shows the Continent & the Country selections

You can checkout to ng-conf/learn-rxjs-01 branch on https://stackblitz.com/edit/stackblitz-starters-hvcdxw to view the app components

In the app.component.ts file

if API call is returned from an observable property - the call is triggered only once - for each & every CONTINENT dropdown select

fetchCountryByContinent$ = this._http.get<ContinentCountry[]>(this.countriesUrl).pipe(publishReplay(), refCount())

if API call is returned from a getter method - Call is triggered for each & every CONTINENT dropdown select

get fetchCountryByContinent$() {
    return this._http.get<ContinentCountry[]>(this.countriesUrl).pipe(publishReplay(), refCount());
}

and

if I remove the .pipe(publishReplay(), refCount()) & run the code - both the instances behave in the same manner by providing duplicate API calls - for each and every CONTINENT dropdown select

Why is the behavior like this for all these cases?