VUEJS V-FOR ведет себя странно

Ваш v-if никогда не будет отображаться, даже если profileData имеет данные, потому что вы не можете напрямую проверить длину объекта в javascript.

Несколько вещей:

1. Вы не можете проверить длину объекта, он вернет undefined. Если вы должны использовать объект, вам нужно будет проверить наличие Object.keys(obj).length.

let obj = {
  first: {
    name: "first",
    meta: "data"
  },
  second: {
    name: "second",
    meta: "data"
  }
};

console.log("Object.length is: ", obj.length);
console.log("Object.keys().length is: ", Object.keys(obj).length);

2. Вы избыточны, вам не нужно проверять profileData и его длину (и вам не нужно> 0), вы можете просто проверить v-if="Object.keys(profileData).length". Если в объекте нет записей, он не будет отображаться, потому что if(0) является ложным.
3. Я настоятельно рекомендую работать с массивами для итерации с v-for. Я бы использовал вычисляемые свойства и возвращал массив и повторял бы его. Реактивность объектов работает в JS неинтуитивно, поэтому позже вы будете ломать голову, когда попытаетесь выяснить, почему что-то не обновляется в вашем представлении:

computed: {
    listData() {
        let list = Object.values(this.profileData);
        return list;
    }
}

С учетом:

<div v-if="listData.length"/>

Кроме того, не используйте индекс входа массива в качестве :key, потому что если у вас есть другой массив с v-for, у вас будут дублированные ключи в вашей модели. Я бы использовал что-то вроде v-for="(item, key) in list" :key="'list-item-' + key"

Ставьте v-for на li, а не на ul.

<ul>
    <li v-for="value in profileData"
    :key="value.id">{{value.id}}</li>
</ul>

Кроме того, если ваши данные вашего профиля являются объектом, а не массивом, вам нужно решить, хотите ли вы перебирать ключи или значения.

<ul>
    <li v-for="value in Object.values(profileData)"
    :key="value.id">{{value.id}}</li>
</ul>

<ul>
    <li v-for="value in Object.keys(profileData)"
    :key="value.id">{{value.id}}</li>
</ul>

Или используйте поведение Vue по умолчанию.

<ul>
    <li v-for="(value,key) in profileData"
    :key="value.id">{{value.id}}</li>
</ul>

Изменен API, поэтому рабочий код немного отличается от исходного. Вот шаблон:

<div
  v-if="listData.length"
>
  <ul>
    <li>Name: <b>{{ profileData.user.first_name }}</b></li>
    <li>Surname: <b>{{ profileData.user.last_name }}</b></li>
    <li>Username: <b>{{ profileData.user.username }}</b></li>
    <li>Car: <b>{{ profileData.if_cars_owned }}</b></li>
    <li v-if="profileData.if_cars_owned === true">
      Car model: {{ profileData.user_car_type }}
    </li> 
    <li v-if="profileData.if_cars_owned === true">
      Car power: {{ profileData.user_car_powered_by }}
    </li> 
    <li>Motorcycle: <b>{{ profileData.if_motorcycle_owned }}</b></li>
    <li v-if="profileData.if_motorcycle_owned === true">
      Motorcycle model: {{ profileData.user_motorcycle_characteristic }}
    </li>
  </ul>
</div>

Скрипт:

created(){
    const profileData = this.$store.getters.profileData
    this.profileData = profileData
    console.log('profile data in profilo: ', profileData)
  },

я тоже обновил

<div
  v-if="listData.length"
>

и в сценарии

computed: {
    ...,
    listData() {
      let list = Object.values(this.profileData);
      return list;
    }
},

следуя совету @Adrián S. Basave. Спасибо всем, кто пытался помочь. Икс