gistfile1.txt

<template>
  <div>
    <template v-if="photo">
      <img :src="photo.url" :id="photo.filename" class="img-fluid thumbnail rounded" :alt="photo.title" />
      <h1 class="h3">{{ photo.title }}</h1>
      <Tags :photo="photo" />
      <p>Share edit close delete flag</p>
      <p>Viewed 23 times</p>
      <b-button variant="link" class="text-success mb-2" v-if="photo.status == 'Solved'"> <b-icon icon="check-circle" aria-hidden="true"></b-icon> Solved! </b-button>
      <b-button
        variant="link"
        v-b-popover.hover.top="'Accept this answer if your question has been solved or you are satisfied with the responses'"
        class="text-secondary mb-2"
        v-if="photo.status == 'Unsolved'"
      >
        <b-icon icon="check-circle" aria-hidden="true"></b-icon> Mark as Solved
      </b-button>

      <section id="description" class="pb-3">
        <SpinButton @spinButton="spinButton" :vertical="vertical" class="d-sm-none w-50" />
        <div class="row">
          <div class="col-sm-1">
            <SpinButton @spinButton="spinButton" class="d-none d-sm-block" />
          </div>
          <p class="col-sm-11">{{ photo.description }}</p>
        </div>
      </section>
      <AnnotationsCard :clientAnnos="clientAnnos" class="pb-3" />

      <p>Asked by {{ photo.username }} on {{ photo.createdAt ? photo.createdAt.toDate().toDateString() : '' }}</p>
      <CommentsCard class="pb-3" />
      <Contributors />

      <p>Know someone who can answer? Share a link</p>
    </template>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { Annotorious } from '@recogito/annotorious'
import { db, photosCollection } from '@/firebase'
import SpinButton from '@/components/SpinButton.vue'
import Tags from '@/components/Tags.vue'
import Contributors from '@/components/Contributors.vue'
import CommentsCard from '@/components/CommentsCard.vue'
import AnnotationsCard from '@/components/AnnotationsCard.vue'
export default {
  name: 'photoDetail',
  components: {
    SpinButton,
    Tags,
    Contributors,
    CommentsCard,
    AnnotationsCard
  },
  data() {
    return {
      photo: null,
      // set variable during component creation to use when mounting
      anno: {},
      clientAnnos: [],
      vertical: false
    }
  },
  async mounted() {
    // get photo properties
    await this.getPhotoDoc()
    // initialize Annotorious and assign to 'anno' variable for use throughtout component
    this.anno = await new Annotorious({ image: this.photo.filename })
    // set annotations if available
    await this.setAnnotations()
    // listen to annotation events
    this.onAnnotate()
    this.onUpdateAnnotate()
    this.onDeleteAnnotate()
    this.setAuthInfo()
  },
  methods: {
    spinButton(value) {
      console.log(value)
    },
    // Helper to find a Firebase doc by annotation ID
    findById(id) {
      var query = db.collection('annotations').where('id', '==', id)
      return query.get().then(function(querySnapshot) {
        return querySnapshot.docs[0]
      })
    },
    async setAnnotations() {
      try {
        const querySnapshot = await db
          .collection('annotations')
          .where('target.source', '==', this.photo.url)
          .get()
        // create new array with the annotations comments and tags to use on client
        const annotations = await querySnapshot.docs.map(doc => doc.data())
        // const data = annotations.map(x => x)
        // const test = bodies.forEach(x => x)
        // console.log(bodies)
        if (annotations.some(({ body }) => body.some(({ creator }) => creator.id === this.userProfile.userId))) {
          console.log('yep it exists')
          this.anno.addAnnotation()
        } else {
          console.log('nope no exist')
        }
      } catch (error) {
        console.log(error)
      }
    },
    setAuthInfo() {
      const arg = {
        id: this.userProfile.userId,
        displayName: this.userProfile.username
      }

      this.anno.setAuthInfo(arg)
    },
    onAnnotate() {
      try {
        this.anno.on('createAnnotation', annotation => {
          const anno = annotation
          anno.photoDocId = this.photo.id
          db.collection('annotations')
            .add(anno)
            .then(docRef => {
              console.log('stored anno!', docRef)
            })
            .catch(error => {
              console.log('error when trying to annotate!', error)
            })
        })
      } catch (error) {
        console.log('onAnnotate error: ', error)
      }
    },
    onUpdateAnnotate() {
      try {
        this.anno.on('updateAnnotation', (annotation, previous) => {
          this.findById(previous.id).then(doc => doc.ref.update(annotation))
          console.log('updated anno!')
        })
      } catch (error) {
        console.log('error updating anno', error)
      }
    },
    onDeleteAnnotate() {
      try {
        this.anno.on('deleteAnnotation', annotation => {
          this.findById(annotation.id)
            .then(doc => {
              doc.ref.delete()
            })
            .then(() => {
              console.log('doc deleted')
            })
        })
      } catch (error) {
        console.log('error deleting annotation', error)
      }
    },
    async getPhotoDoc() {
      try {
        const docRef = await photosCollection
          .doc(this.$route.params.id) // to be dynamic
          .get()
        if (docRef.exists) {
          // data() returns all data about the doc
          let photo = await docRef.data()
          this.photo = photo
        } else {
          console.log('no docs exist for this photo')
        }
      } catch (error) {
        console.log('Error getting document:', error)
      }
    }
  },
  computed: {
    ...mapState(['userProfile', 'currentUser'])
  }
}
</script>

This won't work. You're checking whether there's any annotation that's by the current user. (And then you're calling addAnnotation with no argument, which won't have any effect.

You need to loop through your annotations. Perform the check for each single annotation, and then use addAnnotation(annotation, !isByCurrentUser).