diff --git a/src/client/pages/announcements.vue b/src/client/pages/announcements.vue
index 089475ed6..49841db8a 100644
--- a/src/client/pages/announcements.vue
+++ b/src/client/pages/announcements.vue
@@ -11,7 +11,7 @@
 				<img v-if="announcement.imageUrl" :src="announcement.imageUrl"/>
 			</div>
 			<div class="_footer" v-if="$store.getters.isSignedIn && !announcement.isRead">
-				<mk-button @click="read(announcement)" primary><fa :icon="faCheck"/> {{ $t('gotIt') }}</mk-button>
+				<mk-button @click="read(items, announcement, i)" primary><fa :icon="faCheck"/> {{ $t('gotIt') }}</mk-button>
 			</div>
 		</section>
 	</mk-pagination>
@@ -47,8 +47,13 @@ export default Vue.extend({
 	},
 
 	methods: {
-		read(announcement) {
-			announcement.isRead = true;
+		// TODO: これは実質的に親コンポーネントから子コンポーネントのプロパティを変更してるのでなんとかしたい
+		read(items, announcement, i) {
+			console.log(this);
+			Vue.set(items, i, {
+				...announcement,
+				isRead: true,
+			});
 			this.$root.api('i/read-announcement', { announcementId: announcement.id });
 		},
 	}