1---
2category: Elements
3---
4 
5# useMutationObserver
6 
7Watch for changes being made to the DOM tree. [MutationObserver MDN](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver)
8 
9## Usage
10 
11```vue
12<script setup lang="ts">
13import { useMutationObserver } from '@vueuse/core'
14import { ref, useTemplateRef } from 'vue'
15 
16const el = useTemplateRef('el')
17const messages = ref([])
18 
19useMutationObserver(el, (mutations) => {
20  if (mutations[0])
21    messages.value.push(mutations[0].attributeName)
22}, {
23  attributes: true,
24})
25</script>
26 
27<template>
28  <div ref="el">
29    Hello VueUse
30  </div>
31</template>
32```
33 
34## Type Declarations
35 
36```ts
37export interface UseMutationObserverOptions
38  extends MutationObserverInit, ConfigurableWindow {}
39export interface UseMutationObserverReturn extends Supportable {
40  stop: () => void
41  takeRecords: () => MutationRecord[] | undefined
42}
43/**
44 * Watch for changes being made to the DOM tree.
45 *
46 * @see https://vueuse.org/useMutationObserver
47 * @see https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver MutationObserver MDN
48 * @param target
49 * @param callback
50 * @param options
51 */
52export declare function useMutationObserver(
53  target:
54    | MaybeComputedElementRef
55    | MaybeComputedElementRef[]
56    | MaybeRefOrGetter<MaybeElement[]>,
57  callback: MutationCallback,
58  options?: UseMutationObserverOptions,
59): UseMutationObserverReturn
60```
61